Плавающие разделители и центрирование Div

Question

У меня есть три div, которые я бы хотел выровнять по горизонтали, а также выровнены по центру страницы.

То, что у меня есть, близко к тому, что я хочу, но его не сосредоточено на странице, и оно не изменяет размер с помощью окна браузера.

Я по-прежнему новичок в HTML и CSS, поэтому любые предложения будут оценены.

#wrapper { 
 
    width: 90%; 
 
    min-width: 768px; 
 
    max-width: 1280px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.projectlogo { 
 
    float: left; 
 
    margin: 20px; 
 
    width: 122px; 
 
    height: 113px; 
 
} 
 

 
.projectsite { 
 
    border-radius: 50%; 
 
    border: solid #DFF0D8; 
 
    float: left; 
 
    margin: 20px; 
 
    width: 126px; 
 
    height: 126px; 
 
} 
 

 
.description { 
 
    float: left; 
 
    margin: 20px; 
 
    width: 400px; 
 
} 
 

 
#gallery { 
 
    width: 980px; 
 
    height: 240px; 
 
    font-size: 1.25em; 
 
} 
 

 
#gallery h2 { 
 
    text-align: center; 
 
}

<div id="wrapper"> 
 
    <main> 
 

 
    <div id="gallery"> 
 
     <h2>My Work</h2> 
 

 
     <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" /> 
 
     <div class="description"> 
 
     <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site. </p> 
 
     </div> 
 
     <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" /> 
 

 
    </div> 
 
    </main> 
 
</div>

Изображение не будет отображаться для вас, читателей, но я включил HTML, чтобы дать вам лучшее представление о том, что это я пытаюсь сделать.

Я также включил информацию об обертке, потому что это то, что я настраиваю на страницах, чтобы сосредоточить все и дать им страницы с пробелами слева и справа.

Answer 1

Вот решение, в котором все сосредоточено, надеюсь, это то, что вы ищете. Для этого я создал div, чтобы обернуть ваши три div и дал ему display: inline-block, чтобы он сжимался, чтобы соответствовать. Затем я дал родительскому text-align: center, чтобы выровнять центр div-обертки. Я также предоставил автографы вашей галереи div слева и справа, чтобы сосредоточить все это. Наконец, я удалил верхнюю маржу с вашего первого элемента p, так что верхние строки располагаются вместе с другими div.

Надеюсь, это именно то, что вы искали!

Рабочая Демо (не забудьте нажать "Full Page", чтобы увидеть весь экран):

#wrapper { 
 
    width: 90%; 
 
    min-width: 768px; 
 
    max-width: 1280px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.projectlogo { 
 
    float: left; 
 
    margin: 20px; 
 
    width: 122px; 
 
    height: 113px; 
 
} 
 
.projectsite { 
 
    border-radius: 50%; 
 
    border: solid #DFF0D8; 
 
    float: left; 
 
    margin: 20px; 
 
    width: 126px; 
 
    height: 126px; 
 
} 
 
.description { 
 
    float: left; 
 
    margin: 20px; 
 
    width: 400px; 
 
} 
 
.description p:first-child { 
 
    margin-top: 0; 
 
} 
 
#gallery { 
 
    width: 980px; 
 
    height: 240px; 
 
    font-size: 1.25em; 
 
    margin: 0 auto; 
 
} 
 
#gallery h2 { 
 
    text-align: center; 
 
} 
 

 
#wrap { 
 
    display: inline-block; 
 
} 
 

 
main { 
 
    text-align: center; 
 
}

<div id="wrapper"> 
 
    <main> 
 
     <div id="gallery"> 
 
      <h2>My Work</h2> 
 

 
      <div id="wrap"> 
 
       <img class="projectlogo" src="images/rotary_logo.png" width="122" height="113" alt="" /> 
 
       <div class="description"> 
 
        <p>Rotary Club of Wilsonville is an ongoing project. They are an active group in their community and plan many events for variuos causes. They needed help keeping the calendar updated and improving some of the content on their site.</p> 
 
       </div> 
 
       <img class="projectsite" src="images/website2.png" width="126" height="126" alt="" /> 
 
      </div> 
 
     </div> 
 
    </main> 
 
</div>

JSFiddle Версия: https://jsfiddle.net/66jhc0Ld/1/