Floating Divs and centering the Div

我有三个div，我想水平对齐，也对齐在页面的中心。Floating Divs and centering the 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给你的是什么，我试图完成一个更好的主意。

我还包括了包装信息，因为这是我设置页面以将所有内容居中并将页面左侧和右侧的空白区域分配给它。

来源

2015-08-23 Danny Suarez

你尝试加入' vertical-align：middle;'对div的？ – Sablefoste

[如何将所有浏览器的div垂直居中？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers） –

下面是一个解决方案，以一切为中心，希望这是你正在寻找的。为了做到这一点，我创建了一个div来环绕你的三个div，并给它display: inline-block，使它缩小以适应。然后我给父母text-align: center排队包装div中心。我也给你的画廊股利汽车利润左右，以整个事情为中心。最后，我从第一个p元素中删除了顶部边距，以便顶部与其他div匹配。

希望这正是你正在寻找的！

工作现场演示（请务必点击 “整页” 看到它全屏）：

#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/

来源

2015-08-23 01:08:22

Floating Divs and centering the Div

回答

相关问题