如何使用 HTML 和 CSS 对齐图像中显示的文本？

Question

我正在尝试对齐一段文本，使其看起来像图像中的那样。然而，没有可接受的结果。文本位于重复的浮动 div 中。相同的 divisions 漂浮在彼此旁边。

我的HTML代码：

<div id="bottomPanel">
  <div class="bottomItem">
    <img src="image.png" alt="mouse" class="imgBottom">
    <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
  </div>
</div>

我的CSS代码：

#bottomPanel {
    float: left;
    width: 100%;
    text-align: center;
}
.bottomItem {
    float: left;
    width: 100%;
    margin-top: 10px;
    background-color: #e6e6e6;
}
.imgBottom {
    float: left;
    padding-top: 25px;
    padding-left: 14px;
}
.item_bottomDesc {
    float: left;
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    color: #133855;
    padding-top: 42px;
    padding-left: 18px;
    display: block;
}
.item_bottomAbout {
    float: left;
    font-family: Arial;
    font-size: 12px;
    width: 376px;
    height: auto;
    text-align: justify;
    display: block;
    padding-top: 50px;
    color: #7b7a79;
}

元素应该是这样的：

我无法正确对齐的文字太长了。分区有 100% 的宽度，大约是。 774 像素。 bottomPanel 是一个 div 所有浮动的 .bottomItem 所在的位置。有什么想法吗？

Answer 1

总的来说这里没有太大的错误。只是你有一些你不需要的额外东西。

也就是说，bottomDesc 和 bottomAbout 而不是 需要 floated，而这两个 padding-top元素也需要调整。

我还为图像添加了一个明确的 width/height，您可以根据需要随意调整，但定义它是个好主意。我还将其 padding 替换为适当的 margins.

最后，我完全删除了 #bottomPanel 样式 - 这里再次不需要 float，并且 width:100% 是默认样式。此外，text-align:center 是不必要的。

这里是修改后的代码，供您查看：

.bottomItem {
    float: left;
    width: 100%;
    margin-top: 10px;
    background-color: #e6e6e6;
}
.imgBottom {
    float: left;
    margin: 14px;
    width: 100px;
    height: 100px;
}
.item_bottomDesc {
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    color: #133855;
    padding-top: 14px;
    padding-left: 18px;
    display: block;
}
.item_bottomAbout {
    font-family: Arial;
    font-size: 12px;
    width: 376px;
    height: auto;
    text-align: justify;
    display: block;
}

<div id="bottomPanel">
  <div class="bottomItem">
    <img src="http://placehold.it/100x100" alt="mouse" class="imgBottom">
    <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
  </div>
</div>

Answer 2

我建议您为此使用 flexbox 而不是 float，您不必使用 padding 来获得垂直对齐。

.bottomItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
}

.right {
  max-width: 60%;
  margin: 0 10px;
}

<div id="bottomPanel">
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
  
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
  
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
</div

如何使用 HTML 和 CSS 对齐图像中显示的文本？

What to do to align text as shown in the image using HTML and CSS?

html

css

css-float

css-position

text-align