I have a h1 within the body and want to vertically align and center align this text.
I know I can use the position: absolute; and then margin-top: "HALF OF HEIGHT"; but this h1 changes on refresh and has different widths. The height is always the same so I can vertically align it fine but it's center aligning it. I can't use text-align: center; becuase the h1 is positioned absolute so it won't work.
Is there an easier way to do this?
Thanks!
Given that the element doesn't have a background, you could do this to horizontally center an element with absolute positioning:
.your-element {
position: absolute;
width: 100%;
text-align: center;
}
A working fiddle: http://jsfiddle.net/VSySg/
Depending on the rest of your layout, this may work:
h1 {
display: block;
text-align: center;
line-height: /* height of container */
}
http://jsfiddle.net/xC3vn/
Related
I have a div that I want to position at the center of a page(both vertically and horizontally).
For centring it horizontally I used the center tags around the div and for vertically centring it is tried a couple of things but none of them actually working.
Check out the code:
CSS:
.vcenter{
height: 50px;
width: 50px;
background: red;
vertical-align: middle;
margin-top: calc(50% - 25px);
}
HTML :
<center>
<div class="vcenter">
</div>
<center>
Also I don't think using centre tags around the the div to centre an object is the best way to so it.
What I want to know is
How can I centre the div both vertically and horizontally no matter what the size of the screen is ?
Is there a better way to centre the div horizontally rather than using the center tags ?
If available, using flex is the easiest. Apply these styles to the container in which you want to center your div:
display: flex;
align-items: center;
justify-content: center;
#divId {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The only thing that isn't obvious is the transform takes into account the size of the element.
I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).
Maybe is it because of the div's position absolute??
I don't know, please help me
Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.
text-align: center; is used for horizontal alignment.
For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces:
https://css-tricks.com/centering-css-complete-guide/
.container {
position: absolute;
text-align: center;
padding : 30px 0;
}
Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink
.container {
position: absolute;
text-align: center;
padding : 30px 0;
width: 100%;
}
Why don't you use line-height: [height of div]?
.container {
position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;
}
Then it should be centered. I Hope I helped! :-)
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
I'm trying to horizontally and vertically center a header on top of an image. So far I've got the vertical centering down (which is the reason for the relative and absolute positioning). However, the horizontal centering is giving me problems now: margin:0 auto; doesn't work, left:50%; doesn't work and text-align:center doesn't work. Does anyone know how to horizontally center the header on top of the image?
Details:
I don't know the height or width of any of the elements, so I can't use fixed heights or widths
Setting the image as a background is not an option because the image is part of the content
Not all headers will be a similar length, so I have to find a dynamic solution (they will all be one line though, I'll cut them off with an ellipsis)
HTML
<article>
<h2>Title</h2>
<img src="http://bit.ly/gUKbAE" />
</article>
CSS
article {
position: relative;
}
h2 {
line-height: 0;
position: absolute;
top: 50%;
left: 0;
margin: 0;
padding: 0;
}
It's here: http://jsfiddle.net/kmjRu/21/
You can set the article to display: inline-block and width: auto, then center the h2:
http://jsfiddle.net/kmjRu/28/
This is the live example:
http://jsfiddle.net/NjnAF/
The div#con is the search result panel,I want the search item displayed in the list manner with the icon and text.
Now I can not make the icon align middle vertically and make the text the "1" "2" just in the center of the image.
Any suggestion?
I used :
div.item div.img {
float: left;
width: 22px;
height: 25px;
background-image: url('http://i.stack.imgur.com/NpSHB.gif');
background-repeat: no-repeat;
background-position: center left;
text-align: center;
vertical-align: middle;
}
and I have updated the fiddle. Is that what you needed?
Use line-height - vertical alignment: block level elements, like a div do not have any effect with vertical alignment. You would need to use line-height or use absolute positioning with div as relative.
you need to modify the CSS
div.item div.img{ text-align:center;
margin-top:2px; /*can change this according to your need */
}
Add these two properties. Vertical align will not work. Fiddle http://jsfiddle.net/NjnAF/2/