I need to horizontally and vertically center text in a paragraph. The paragraph itself must fill 100% of the available height and width of the parent element without setting an explicit/static width for the paragraph (percentage like 100% is acceptable).
HTML
<div>
<p>Sudo make me a sandwich.</p>
</div>
CSS
div
{
background-image: url('idahoisntafraidofgorillas.png');
height: 138px;
width: 100%;
}
p
{
display: table-cell;
text-align: center;
vertical-align: center;
}
Ideally this should not require anything greater than CSS level 2. The current code doesn't actually center the text unless I set a static width however that would spam up the CSS I'm working on so I'm seeking a more elegant and proper solution.
Try vertical-align: middle also add display: table to div
div {
height: 138px;
width: 100%;
border: 1px solid black;
display: table;
}
p {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div>
<p>Sudo make me a sandwich.</p>
</div>
Set the line-height, vertical-align:middle;, and make sure there is no extra margin, margin:0px; all on the paragraph element.
div {
height: 138px;
width: 100%;
border: 1px solid black;
}
p {
margin:0px;
line-height:138px;
text-align: center;
vertical-align: middle;
}
<div>
<p>Sudo make me a sandwich.</p>
</div>
Related
I want to center a DIV within a parent DIV. I have tried using the recommende dsolution on SO -- How to horizontally center a <div> in another <div>?, but its not centering it. The basic layout is this
#revealScoreMobile {
padding: 10px;
display: block;
text-align: center;
width: 100%;
}
.stats {
text-align: center;
width: 100%;
background-color: red;
margin: 0 auto;
}
<div id="revealScoreMobile">
...
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
and yet as you can see from the Fiddle -- https://jsfiddle.net/5Lgu0uw3/2/, the child DIV is not centering within the parent, despite the fact I have
text-align:center;
in there. What gives? What else do I need to do to center that DIV within its parent?
I am not completely sure what you want, but if you want the inner DIV NOT have the full width, but only as much as its text contents require, make it an inline-block and erase the widthsetting (or give it a widthsetting less than 100%). inline-blocks are affected by text-align: center
(note that I erased some superfluous settings, but put the ... content into its own DIV, since it otherwise would be on one line with the subsequent inline-block.
#revealScoreMobile {
padding: 10px;
text-align: center;
}
.stats {
display: inline-block;
text-align: center;
background-color: red;
}
<div id="revealScoreMobile">
<div> ... </div>
<div class="stats" style="">
<div class="score">5.0</div>
(<span class="votesCast">1</span> votes cast)
</div>
</div>
As others have suggested in the comments, text-align: center; only applies to text content, not the inner div.
Your CSS applies width: 100%; to .stats which is forcing it to take up the full width of it's parent container #revealScoreMobile, which is also width: 100%;. Secondly it needs display: inline-block; to override the previous display: table-cell; as present in your jsfiddle example.
Replace in your CSS:
.stats {
display: inline-block;
text-align: center;
background-color: red;
margin: 0 auto;
}
W3School says :
When we use vertical-align:middle; The element is placed in the
middle of the parent element
So I tried to do that, But didn't get desired outcome
CODE :
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
vertical-align: middle;
}
p {
vertical-align: middle;
}
<div>
text
<p>
yo bro
</p>
</div>
Why m I not getting the desired outcome ?
because vertical-align only applies to inline level and table-cell elements. Both div and p are block level elements.
Applies to inline-level and table-cell elements. It also applies to
::first-letter and ::first-line.
MDN Source
With that in mind and using your example make your div a table and your p a table-cell
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: table
}
p {
vertical-align: middle;
display: table-cell;
}
<div>
<p>
yo bro
</p>
</div>
NOTE: Don't trust W3Schools as source, instead use MDN or W3C Specs
There are a couple of problems with your posted code.
Firstly, you haven't really explained what your desired outcome is so it's hard to help you with your specific problem.
Assuming you want to align the paragraph text with the other text in the div, you'll have to add display:inline-block; to your paragraph. Then, the trick with vertical aligning is to use line-heightas well as height. Set them both the same and voilá, things line up nicely.
div{
height: 200px;
width: 500px;
line-height:200px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
display:inline-block;
padding:0;
margin:0;
}
codepen here
Add to div in css display: table-cell ;
div {
display: table-cell;
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p {}
try using, line-height in styling, as shown below, or fiddle link
div{
height: 200px;
width: 500px;
background: red;
text-align:center;
vertical-align: middle;
}
p{
/* vertical-align: middle; */
line-height: 100px;
}
<div>
text
<p>
yo bro
</p>
</div>
If you wanted to use FlexBox you could do it this way.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
This makes things centred both ways. If you want it just to be the height then delete justify-content. Note that you need to do flex-direction: column in this example to make the content go down the page and not sit side-to-side.
div {
height: 200px;
width: 500px;
background: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<div>
yo
<p>bro</p>
</div>
I did little boxes on my website to shortly describe our activity, The text is that the same length for all the boxes so I am trying to center the text in the middle of the box with my css. I tried display:table-cell, vertical-align:center, but it doesn't work.
Did someone has an idea about what I can do?
Thank you :)
You need to add display: table; to the text container and
display: table-cell;
vertical-align: middle;
text-align:center;
to your text span/h1/p
body {
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 50%;
width: 50%;
display: table;
background: blue;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<body>
<div>
<h1>Text</h1>
</div>
</body>
You need to add your code and be very specific about the question next time.
In css,
.text-center {
text-align : center;
}
Add a class .text-center to you div.
I am working on a menu system which consists of div's (width: 275px, height: 75px, border: 1px solid) among each other. I want the whole div to be clickable, which I do with an a tag and display:block property (see code below). Some of the menu entries are multi-lined text, but I can't align them vertically. The basic code is:
.div {
width: 275px;
height: 75px;
border: 1px solid #000;
text-align: center;
float: right;
}
<div class="div">
<a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>
I have tried the following:
line-height: 75px: that doesn't work with multi-lined text
display: table and vertical-align: middle does not work with the 100% width and height of the -tag.
I have really tried a lot other code with wrapper div's, tables, ... but with no success.
Otherwise, I do not want to make use of javascript (onclick="location.href").
Thanks!
You can do it with what you've already tried: 'display:table-cell; vertical-align: middle;', you just have to set the height to 75px instead of 100%.
Use display:table-cell, to achieve vertically centred multi-lined text.
JSFiddle Demo
CSS:
div {
width: 300px;
height: 200px;
border: 1px solid #000;
text-align: center;
display: table-cell;
vertical-align: middle;
}
When I try to vertical align centered inner DIV my centering isn't working...
What's my problem here?
CSS Code:
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
vertical-align: middle
}
HTML Code:
<div id="page_bar">
<div class="page_bar">
Mapa Strony
</div>
</div>
EDIT: I want inner DIV to be centered, not the text in inner DIV...
EDIT: Look at: http://mistic-miners.comule.com/index.html the silver area must be centered which means the inner div must be centered not the text inside of inner div.
It looks like you may need to wrap the .page_bar class in order to get it to center horizontally with the table-cell display.
#wrap{
margin: 0px auto;
display:table;
}
#page_bar
{
width: 100%;
height: 30px;
background-color: white
}
.page_bar
{
width: 800px;
height: 30px;
display: table-cell;
text-align: left;
vertical-align: middle;
margin: 0px auto;
}
<div id="page_bar">
<div id="wrap">
<div class="page_bar">
Mapa Strony
</div>
</div>
</div>
This will be centered vertically and horizontally:
#page_bar
{
width: 100%;
height: 100px;
background-color: black;
text-align: center;
}
.page_bar
{
width: 800px;
height: 100px;
display: table-cell;
vertical-align: middle;
color: white;
}
jsfiddle: http://jsfiddle.net/DgwwB/2/
if you add text-align:center; to #page_bar ?
vertical-align: middle
I think you forgot a ';' on this. Also give 2~3px space 30-27 or 33-30
I've had this issue and after wasted time on faffing about I finally found the obvious simple fix.
If you apply 'display:table-cell' to an element, apply 'display:table' to the parent, this will make vertical aligning work the way you expect it to.