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

我正在尝试对齐一块文本，使其看起来像在图像中。但是，没有可接受的结果。文本位于正在重复的浮动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>

以下是元素的外观：

我无法正确对齐的文本是长文本。 分区的宽度为100%，约为774px。底部面板是所有浮动底部项目所在的div。

---

有什么想法吗？

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

也就是说，

bottomDesc

和

bottomAbout

不需要

float

ed，这两个元素的

padding top

也需要调整

我还为图像添加了明确的宽度/高度，可以根据需要自由调整，但定义它是个好主意。我还将其

填充

替换为适当的

边距

s

最后，我删除了

#底部面板

样式-这里也不需要

浮动

，而且

宽度：100%

是默认值。此外，不需要

文本对齐：居中

下面是修改后的代码供您查看：


.bottomItem{
浮动：左；
宽度：100%；
边缘顶部：10px；
背景色：#e6；
}
.imgBottom{
浮动：左；
利润率：14px；
宽度：100px；
高度：100px；
}
.项目描述{
字体系列：Arial；
字体大小：粗体；
字体大小：12px；
文字装饰：无；
颜色：#133855；
填充顶部：14px；
左侧填充：18px；
显示：块；
}
.item_关于{
字体系列：Arial；
字体大小：12px；
宽度：376px；
高度：自动；
文本对齐：对齐；
显示：块；
}

Lorem ipsum door sit amet，一位杰出的领导者。孕妇、妇女、妇女、妇女、妇女、妇女、妇女和妇女。水母
我建议您使用
float
而不是
float，并且您不必使用
padding
来获得垂直对齐


.bottomItem{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
利润率：10px；
}
.对{
最大宽度：60%；
利润率：0.10px；
}

Lorem ipsum door sit amet，一位杰出的领导者。孕妇、妇女、妇女、妇女、妇女、妇女、妇女和妇女。水母
Lorem ipsum door sit amet，一位杰出的领导者。孕妇、妇女、妇女、妇女、妇女、妇女、妇女和妇女。水母
Lorem ipsum door sit amet，一位杰出的领导者。孕妇、妇女、妇女、妇女、妇女、妇女、妇女和妇女。水母
如果在生产中使用flexbox，请注意它的电流。
#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;
}