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

Question

我正在尝试对齐文本块，以使其看起来像图像中的文本。 但是，没有令人满意的结果。 文本位于重复的浮动div中。 相同的分区彼此相邻。

我的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％，约为 774px。 bottomPanel是所有浮动.bottomItem所在的div。 有任何想法吗？

Answer 1

因此，总体而言，这里没有太多错误。 只是您还有一些不需要的东西。

即， bottomDesc和bottomAbout 不需要是float版，和padding-top为这两个元件无需调整过。

我还为图像添加了明确的宽度/高度，可以根据需要随意调整，但是定义它是一个好主意。 我还用适当的margin替换了其padding 。

最后，我完全删除了#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