使用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;
}

感谢帮助人们！

小提琴https://jsfiddle.net/dfg4qLfe/

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

Answer 1

避免为同一个属性定义不同的css类，例如，如果您的第一个div中的p标记确实有某个类，则不需要定义另一个css类对于您在下一个div中拥有的第二个p标记（如果您希望它们彼此相似）。

为了让内容在中心对齐，我操纵了你的代码，使其变得更干净， CSS技巧：

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

查看此处的代码：

Centered

Answer 2

  

我想把那支铅笔放在中间的顶部，然后是另一个图标   在右上方，但我正在努力，因为它走到了底部   没有上去。

删除浮动并修改显示属性，因此图像可以显示在单独的行中：

.design {
     float: none;
     display: block;
}

无论如何张贴JSFiddle我会告诉你如何做到这一点，下次再考虑一下。

仅供参考，Twitter-Bootstrap框架及其网格布局可以帮助你很多，谷歌吧。