题
There are many situation that horizontal centering not work. I checked many solution, but no one works for me. I have some two wrappers, and i use margin: 0 auto; here For clear illustration you may see the jsfiddle here:http://jsfiddle.net/JdtKV/
with width: 100%, it works. actually I want a fixed-length block to stay in the middle bottom.
There is another problem with the similar code here during my development: Different CSS bottom placement for Firefox and Chrome with table
here is my html:
https://stackoverflow.com/questions/23455209
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class= 'container border'>
<div class="container-content border">
I should be in the middle
<div class="container-content-bottom border">
I also want go to middle
</div>
</div>
</div>
</body>
</html>
and the css here:
html, body{
height:100%;
min-height: 100%;
}
.container{
display: table;
height:100%;
width: 100%;
}
.container-content{
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}
.container-content-bottom{
margin:0 auto;
position: absolute;
bottom: 0;
}
.border{
border: solid 1px #00f;
}
解决方案
If you want to continue to use "position: absolute" you can define a value for "left" to center the container-content-bottom div.
.container-content-bottom{
width:50%;
position:absolute;
bottom:0;
left:25%;
}
From there you can define a width for the div and change the value of left until it is centered.
You could also just add "width: 100%;" if that is the result you are looking for.
.container-content-bottom{
width:100%;
position:absolute;
bottom:0;
}
其他提示
This will center the text. Not sure if that's the desired result. If not, you might want to make a mockup of what you want in Paint or something.
CSS:
.container-content-bottom {
wdith: 100%;
text-align: center;
position: absolute;
bottom: 0;
}
You do not need "position: absolute". Moreover I put a width < 100% to the div, which you want to put into the middle.
Here is the part of css I altered:
.container-content-bottom{
margin:0 auto; /*try use width:100% instead, strange effect happens*/
width:50%;
bottom: 0;
background-color:red;
}
Use text-align:center; and margin: 0 auto; display: block.
If it's a block or an image, you should apply margin properties, and display it as a block (as shown above)
Example:
.block {
margin-left: auto;
margin-right: auto;
display: block;
}
If it's just text, you use text-align: center.
P.S: More info can be found here
Just add right:0; left:0; margin:auto;
Change styles of your .container-content-bottom to
.container-content-bottom{
margin:auto;
position: absolute;
bottom: 0;
right:0;
left:0;
}
