html - 使用 CSS 对齐图片

Question

我试图让网页中的 3 个不同图标与底部的一些文本对齐，这是一个用于学校评估的简单网页，但我被困在了这一部分:

[ ]

所以我想把那支铅笔放在中间顶部，然后将另一个图标放在右上角，但我很挣扎，因为它会走到底部而不会上升。这是我的代码:

HTML:

    <div class="aboutContent">

        <div class="aboutspeed">
            <img src="img/speed.png" class="speed">
            <p class="pspeed">Ferrari's 458 Spider official 0-100 km/h (62 mph) acceleration is 2.9-3.0 seconds, while top speed is 325 km/h (202 mph). It has fuel consumption in combined cycle (ECE+EUDC) of 13.3 L/100 km (21.2 mpg-imp; 17.7 mpg-US) while producing 307g/km of CO2.</p>
        </div>

        <div class="aboutdesign">
            <img src="img/design.png" class="design">
            <p class="pdesign">Bla bla bla bla bla bla</p>
        </div>
    </div>

CSS:

.speed {
    width: 52px;
    height: 55px;
    padding: 15px 0px 10px 190px;;
    display: inline;
}

.pspeed {
    padding: 0px 0px 0px 30px;
    width: 28%;
    text-align: justify;
    margin: 0;
}

.design {
    width: 48px;
    height: 48px;
    padding: 0px 0px 0px 500px;
    position: absolute;
    float: left;
    display: inline;

}

.pdesign {
    padding: 0px 0px 0px 400px;
    width: 28%;
    text-align: center;
    margin: 0;
}

感谢大家的帮助!

fiddle https://jsfiddle.net/dfg4qLfe/

https://jsfiddle.net/dfg4qLfe/embedded/result/

Answer 1

避免为完全相同的属性定义不同的 css 类，例如，如果您在第一个 div 中为您的 p 标签定义了特定的类，则您不需要需要为下一个 div 中的第二个 p 标记定义另一个 css 类(如果您希望两者彼此相似)。

我修改了您的代码，使其更清晰，CSS 技巧 是为了让内容居中对齐:

.design {
display: block;
margin-left: auto;
margin-right: auto;
}

检查这里的代码:

Centered