Center Text Vertically Within
I have a element with a fixed height, and I\'d like to center some text vertically within that element.
I\'ve been trying to follow the inst
-
This:
<!DOCTYPE html>
<style>
.outer { outline: 1px solid #eee; }
.outer > p { display: table-cell; height: 200px; vertical-align: middle; }
</style>
<div class="outer">
<p>This text will be vertically aligned</p>
</div>
<div class="outer">
<p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p>
</div>
works in modern browsers, regardless of whether text spans only one or multiple lines.
Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.
讨论(0)
-
One method with your current setup is to set the margin-top to -25%
http://jsfiddle.net/ycAta/
the only reason why it looks offish is because the position is based off of the top of the text and there is a necessary gap because not all letters are the same height.
As A manual fix -30% looks better. :P
讨论(0)
-
I know this method adds some HTML, but it seems to work in all major browsers (even IE7+).
Basic HTML Structure
<div id="hold">
<div>Content</div>
<div class="aligner"> </div>
</div>
Require CSS
#hold{
height:400px;
}
div{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align:middle;
}
.aligner{
width:0px;
height:100%;
overflow:hidden;
}
The jsFiddle
讨论(0)
-
I was unable to determine the reason why the code in the article I referenced would not work for me. A couple of people offered answers but nothing that struck me as reliable across browsers.
Ultimately, I decided to keep my text on one line, which I do not like as much. But I do need my technique to be clear and well-understood, and for it to work reliably.
讨论(0)
-
I was recently delighted to find that Flexbox can handle this problem for you. The flex-center class in the CSS below will center your div's text, both vertically and horizontally. The example comes out a little smashed, so I recommend resizing the window until the div border isn't flush to the text.
As far as whether you can get away with using flexbox regarding compatibility, see Can I use...
I don't fully understand why this works, and if someone has more insight into the flex box machinery, I'd enjoy the explanation.
.border-boxed {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
/* This is just to make it look pretty */
box-sizing: border-box;
background: linear-gradient(135deg,
rgba(85,239,203,1) 0%,
rgba(30,87,153,1) 0%,
rgba(85,239,203,1) 0%,
rgba(91,202,255,1) 100%);
color: #f7f7f7;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: .8rem;
/* Expand <body> to entire viewport height */
height: 100vh;
/* Arrange the boxes in a centered, vertical column */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 25%;
height: 25%;
border: 2px solid #f7f7f7;
border-radius: 16px;
margin: .5rem;
text-transform: uppercase;
text-align: center;
}
.small {
height: 8%;
}
<div class="box large flexitem flex-center">
Large Box. <br>
So big. <br>
My god.
</div>
<div class="box small flexitem flex-center">
Smaller Box
</div>
讨论(0)
-
You can try setting the line-height to the height of the div, like this:
<div style="height:200px;border:1px solid #000;">
<span style="line-height:200px;">Hello world!</span>
</div>
Here's another technique that seems to work:
#vertical{
position:absolute;
top:50%;
left:0;
width:100%;
}
<div style="position:relative;height:200px;">
<div id="vertical">
Hello world!
</div>
</div>
讨论(0)
- 热议问题
I have a I\'ve been trying to follow the inst
-
This:
<!DOCTYPE html> <style> .outer { outline: 1px solid #eee; } .outer > p { display: table-cell; height: 200px; vertical-align: middle; } </style> <div class="outer"> <p>This text will be vertically aligned</p> </div> <div class="outer"> <p>This longer text will be vertically aligned. Assumenda quinoa cupidatat messenger bag tofu. Commodo sustainable raw denim, lo-fi keytar brunch high life nisi labore 3 wolf moon readymade eiusmod viral. Exercitation velit ex, brooklyn farm-to-table in hoodie id aliquip. Keytar skateboard synth blog minim sed. Nisi do wes anderson seitan, banksy sartorial +1 cliche. Iphone scenester tumblr consequat keffiyeh you probably haven't heard of them, sartorial qui hoodie. Leggings labore cillum freegan put a bird on it tempor duis.</p> </div>works in modern browsers, regardless of whether text spans only one or multiple lines.
Also updated the fiddle at http://jsfiddle.net/74Rnq/135/ Not sure what you were doing with a 625px margin on the left when the thing itself was only 150px in width… Tidied things up a bit by removing the inline styling and using a bit of padding as well.
讨论(0) -
One method with your current setup is to set the margin-top to -25%
http://jsfiddle.net/ycAta/
the only reason why it looks offish is because the position is based off of the top of the text and there is a necessary gap because not all letters are the same height.
As A manual fix -30% looks better. :P
讨论(0) -
I know this method adds some HTML, but it seems to work in all major browsers (even IE7+).
Basic HTML Structure
<div id="hold"> <div>Content</div> <div class="aligner"> </div> </div>Require CSS
#hold{ height:400px; } div{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; vertical-align:middle; } .aligner{ width:0px; height:100%; overflow:hidden; }The jsFiddle
讨论(0) -
I was unable to determine the reason why the code in the article I referenced would not work for me. A couple of people offered answers but nothing that struck me as reliable across browsers.
Ultimately, I decided to keep my text on one line, which I do not like as much. But I do need my technique to be clear and well-understood, and for it to work reliably.
讨论(0) -
I was recently delighted to find that Flexbox can handle this problem for you. The
flex-centerclass in the CSS below will center your div's text, both vertically and horizontally. The example comes out a little smashed, so I recommend resizing the window until the div border isn't flush to the text.As far as whether you can get away with using flexbox regarding compatibility, see Can I use...
I don't fully understand why this works, and if someone has more insight into the flex box machinery, I'd enjoy the explanation.
.border-boxed { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { /* This is just to make it look pretty */ box-sizing: border-box; background: linear-gradient(135deg, rgba(85,239,203,1) 0%, rgba(30,87,153,1) 0%, rgba(85,239,203,1) 0%, rgba(91,202,255,1) 100%); color: #f7f7f7; font-family: 'Lato', sans-serif; font-weight: 300; font-size: .8rem; /* Expand <body> to entire viewport height */ height: 100vh; /* Arrange the boxes in a centered, vertical column */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .flex-center { display: flex; justify-content: center; align-items: center; } .box { width: 25%; height: 25%; border: 2px solid #f7f7f7; border-radius: 16px; margin: .5rem; text-transform: uppercase; text-align: center; } .small { height: 8%; }<div class="box large flexitem flex-center"> Large Box. <br> So big. <br> My god. </div> <div class="box small flexitem flex-center"> Smaller Box </div>讨论(0) -
You can try setting the line-height to the height of the div, like this:
<div style="height:200px;border:1px solid #000;"> <span style="line-height:200px;">Hello world!</span> </div>Here's another technique that seems to work:
#vertical{ position:absolute; top:50%; left:0; width:100%; } <div style="position:relative;height:200px;"> <div id="vertical"> Hello world! </div> </div>讨论(0)
加载中...
- 热议问题