[英]How do I align these divs horizontally in the center?
我有一個圖像,ul列表和另一個在div中排成一行的圖像,我希望它們都水平和垂直居中,並且我希望它們在屏幕變小時(即移動友好型)彼此落在下方。 有人知道解決方案嗎? 這是供參考的圖像:
HTML:
<div class="more">
<div id="social-logo">
<a href="https://drinkaware.co.uk"><img src="" alt="" width="200" height="200"></a>
</div>
<ul class="about">
<li class="a-links">
<div id="about-links" class="site-content">
<ul class="aboutli">
<li><a target="_blank" href="#">About Us</a></li>
<li><a target="_blank" href="#">FAQ's</a></li>
<li><a target="_blank" href="#">Contact Us</a></li>
<li><a target="_blank" href="#">Work With Us</a></li>
<li><a target="_blank" href="#">Terms and Conditions</a></li>
<li><a target="_blank" href="#">Privacy Policy</a></li>
</ul>
</div>
</li>
</ul>
<div id="drinkaware" class="site-content">
<a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a>
</div>
</div>
CSS:
.more {
height: 300px;
background-color: #e6e6e6;
border-top: 1px solid #000000;
}
#social-logo {
display: inline-block;
margin-left: 200px
}
ul.about {
width: 160px;
height: 184px;
display: inline-block;
border: 1px solid #000000;
list-style-type: none !important;
list-style-position: inside;
text-align: center;
text-decoration: none;
line-height: 0.8cm;
padding: 0px;
}
ul.aboutli {
color: #000000;
font-size: 12px;
border: 1px solid yellow;
padding: 0px;
text-decoration: none;
list-style-type: none !important;
}
#drinkaware {
display: inline-block;
top: 100px;
}
使用引導程序,這是一個獲取所需的響應式布局的小例子: http : //jsfiddle.net/jb0Ly020/
HTML
<div class="row">
<div class="col-sm-4 col-xs-12">
123
</div>
<div class="col-sm-4 col-xs-12">
456
</div>
<div class="col-sm-4 col-xs-12">
789
</div>
</div>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
為了使所有元素的高度相同,我將其高度設置為包含外部div的100%,可以手動設置其高度。
通過添加包裝器應用此html:
<div class="wrapper">
<div class="more">
<div id="social-logo">
<a href="https://drinkaware.co.uk"><img src="" alt="" width="200" height="200"></a>
</div>
<ul class="about">
<li class="a-links">
<div id="about-links" class="site-content">
<ul class="aboutli">
<li><a target="_blank" href="#">About Us</a></li>
<li><a target="_blank" href="#">FAQ's</a></li>
<li><a target="_blank" href="#">Contact Us</a></li>
<li><a target="_blank" href="#">Work With Us</a></li>
<li><a target="_blank" href="#">Terms and Conditions</a></li>
<li><a target="_blank" href="#">Privacy Policy</a></li>
</ul>
</div>
</li>
</ul>
<div id="drinkaware" class="site-content">
<a href="https://drinkaware.co.uk"><img src="/Applications/MAMP/htdocs/D0.1/images/drinkawarered.png" width="200" height="auto"></a>
</div>
</div>
</div>
而這個CSS:
.more {
height: auto;
background-color: #e6e6e6;
border-top: 1px solid #000000;
margin: 0 auto;
width: 80%;
}
#social-logo {
display: inline-block;
}
ul.about {
width: 160px;
height: 184px;
display: inline-block;
border: 1px solid #000000;
list-style-type: none !important;
list-style-position: inside;
text-align: center;
text-decoration: none;
line-height: 0.8cm;
padding: 0px;
}
ul.aboutli {
color: #000000;
font-size: 12px;
border: 1px solid yellow;
padding: 0px;
text-decoration: none;
list-style-type: none !important;
}
#drinkaware {
display: inline-block;
top: 100px;
}
.wrapper
{
width: 100%;
text-align: center;
background-color: #e6e6e6;
}
您必須將height: auto
或在div
使用%作為more class
如果您希望它具有響應性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.