CSS: Fitting div height into another inclusive padding
As seen in the picture, I practically have a div of defined width 100% but no defined height, but rather the height is defined to match the contents with a percentage of top and bottom padding. The problem is I want to have some kind of navigation buttons on the right side, and they must be aligned perfectly in the vertical middle. I have included a Fiddle of what I did, but it doesn't show in the middle in all cases. What can be an optimal solution.
HTML
<div class="title">Title
<ul id="bullets">
<li></li>
<li></li>
<ul>
</div>
CSS
.title {
width:100%;
background:#365F95;
background-size: contain;
font-size:130%;
color:#FFF;
padding:5% 0;
text-align:center;
position:relative;
}
.title ul {
position:absolute;
right: 0;
top: 0%;
}
.title ul li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #FFF;
box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
margin: 0 2px;
}
http://jsfiddle.net/HJLEe/2/
看看这个小提琴的想法是垂直对齐列表
position: absolute;
top: 50%;
margin-top: - half-height;
Not the best solution, but it works.
HTML:
<div class="title">Title
<ul id="bullets">
<li></li>
<li></li>
<ul>
</div>
CSS:
.title {
width:100%;
background:#365F95;
background-size; cover;
font-size:130%;
color:#FFF;
padding:5% 0;
text-align:center;
}
.title ul {
position:relative;
float: right;
margin-top: 0px;
}
.title ul li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #FFF;
box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
margin: 0 2px;
}
JSFIDDLE
try use position relative in your ul class
.title ul {
position: relative;
}
jsfiddle.net
链接地址: http://www.djcxy.com/p/76032.html上一篇: CSS flexbox图像居中