Question

我有以下DIV发行版：

--------------------       --------------------
| large image here |       | large image here |
--------------------       --------------------

      Text one                   Text two
      here                       here

图像在DIV中，文本在DIV中。我需要将文本DIV与图像DIV居中对齐，但文本DIV的内容必须保持左对齐。

PS：由于宽度可变的网站（使用Bootstrap），因此无法使用固定宽度的DIV。

有什么主意吗？

Answer 1

Css flexbox网格，文本对齐：居中

Justify-content：：justify-content属性将伸缩容器的内容在主轴上对齐，默认情况下（对于Web而言）是水平轴。

CSS中的 text-align属性用于对齐块元素的内部内容。

img {
    max-width:100%;
}
.flex-container {
    display: flex;
    text-align: center;
}
.flex-container > div {
    flex:1;
}
.text-content {
    text-align: left;
    display:inline-block;
}

   

 <div class="flex-container">
  <div class="flex-item">
    <figure><img src="https://i.imgur.com/HPrl3u8.jpg[/img]"></figure>
    <div class="text-content">Text one <br>
      Here </div>
  </div>
  <div class="flex-item">
    <figure><img src="https://i.imgur.com/HPrl3u8.jpg[/img]"></figure>
    <div class="text-content"> Text two<br>
      Here</div>
  </div>
</div>

Answer 2

Css Grid非常灵活，下面的代码将为您提供所需的结果。我没有使用引导程序，而是依靠网格。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.container > * {
  align-self: center;
  justify-self: center;
}

.container img{
  width: 100px;
  height: 100px;
}

<div class="container">
    <img src="https://gravatar.com/avatar/1c8e8a6e8d1fe52b782b280909abeb38?s=400&d=robohash&r=x" alt="">
    <img src="https://gravatar.com/avatar/1c8e8a6e8d1fe52b782b280909abeb38?s=400&d=robohash&r=x" alt="">
    <div>Some text</div>
    <div>Some text</div>
</div>

CSS居中对齐DIV保持文本在左对齐？

2 个答案: