Выравнивание фотографий с помощью CSS

Question

Я пытаюсь сделать 3 различных иконок в веб-страницы совпадают с текстом в нижней части, это простой веб-страницы для школы Assesment, но я застрял в этой части:

[]

Так что я хочу поместить этот карандаш в верхнюю часть центра, а затем еще одну иконку в верхней правой части, но я изо всех сил стараюсь, как она идет на дно, и не поднимается. Вот мой код:

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

Я хочу, чтобы положить, что карандаш в центре верхней части, а затем еще один значок на верхней правой стороне, но я изо всех сил, как она идет на дно и не поднимается.

Удалить поплавка и изменить отображаемое свойство, так что изображение может отображаться в отдельной строке:

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

В любом случае размещение JSFiddle бы мне показать вам, как это сделать, рассмотрим его в следующий раз.

FYI, Twitter-Bootstrap framework и его макет сетки помогут вам много, google.

Answer 2

Избегайте определения различных css классов для того же свойств, например, если у вас есть определенный класс для p тега в своем первом DIV, вам не нужно определить другой класс CSS для второго p тега, который вы в вашем следующем div (если вы хотите, чтобы оба были похожи друг на друга).

Я манипулируют ваш код, сделал его чище, в CSS Trick для того, чтобы иметь содержание выровненных в центре это:

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

Checkout код здесь:

Centered