This question already has answers here:
How can I position text halfway between centered and left-aligned?
(2 answers)
Closed 2 years ago.
I want a title text and some description text. How can I align title text in between left and center? If left equals 0% and center equals 50%, I want to align text in 25%. Can I achieve this without hardcoding margin?
p{
text-align: center
}
h2{
/*How to align H2 in place between text-align: left
and text-align: center?*/
}
<div>
<h2>Title</h2>
<p>Description</p>
</div>
I am looking for a solution that doesn't use position: absolute to do the trick, as I want to write as little rule as possible.
maybe you can set width title 50% and set to center like this
p{
text-align: center
}
h2{
width :50%;
text-align:center;
}
<div>
<h2>Title</h2>
<p>Description</p>
</div>
Something like this?
p {
text-align: center;
}
h2 {
text-align: center;
columns: 2;
}
<div>
<h2>Title</h2>
<p>Description</p>
</div>
But do mind if the p is too long it might go to the next column. It's better to use margin, width or flex-basis with flexbox.
You can also use grid:
p {
text-align: center;
}
h2 {
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr;
}
<div>
<h2>Title</h2>
<p>Description</p>
</div>
This should work and will give you the correct 1/4 position for the paragraph element in relation to the full width, at any viewport width:
h2 {
text-align: center;
}
p {
display: block;
text-align: center;
transform: translateX(-25%);
}
<div>
<h2>Title</h2>
<p>Description</p>
</div>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
In a header top banner:
#header { background-color: #eaeaea; }
#header a { display: inline-block; margin-right: 1.5em; }
.logo { margin-right: 6em; }
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
Lorem
Ipsum
Contact
</div>
what are the main methods used nowadays to center the 3 right links vertically inside the banner?
I know how to do it with position: relative; top:-...px or similar methods or even <table>, but what would be considered nowadays as the most appropriate methods, especially for responsive design?
Would you use flex features for this? If so, how?
I also want stick the group of 3 links to the right border of the screen, such that, if we resize the browser width, it always stays floating along the right border. I was about to use float: right but there's probably a better solution than mixing flex and float?
PS: These last details are not in the linked questions Flexbox: center horizontally and vertically and How to Vertical align elements in a div?, thus it's not a duplicate.
Personnaly i would use flex with align-items:center for responsive design.
See the code below:
#header{
background-color: #eaeaea;
display:flex;
align-items:center;
justify-content:space-between;
}
#header a{
display: inline-block;
margin-right: 1.5em;
}
.logo{
margin-right: 6em;
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<div id="links">
Lorem
Ipsum
Contact
</div>
</div>
When it comes to vertical centering of text and items, this trick comes in handy:
#header {
display: flex;
align-items: center;
}
A more reliable (albiet complicated) method is to use a grid wrapper
.center {
display: grid;
grid-template-areas: 'a b c';
grid-template-rows: 1fr max-content 1fr;
}
.center > * {
grid-area: b
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
<a class="center" href=""><span>Lorem</span></a>
<a class="center" href=""><span>Ipsum</span></a>
<a class="center" href=""><span>Contact</span></a>
</div>
If you don't care about old browsers (IE), you can use place-items, instead of align-items.
#header{
background-color: #eaeaea;
display: flex;
place-items: center;
}
#header a{
display: inline-block;
margin-right: 1.5em;
}
.logo{
margin-right: 6em;
}
<div id="header">
<img src="https://via.placeholder.com/150x120" class="logo">
Lorem
Ipsum
Contact
</div>
Quoting from https://developer.mozilla.org/en-US/docs/Web/CSS/place-items:
The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as Grid or Flexbox. If the second value is not set, the first value is also used for it.
This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 3 years ago.
I need to vertically align a text in center inside a div. I have found many of way, but none of them respects exact content of the text - I am talking about small graphical parts below text line - letter e.g. "ygq" etc., which is missing when e.g. capital letters are used "YGQ", but it's still counted when text is displayed. I tried:
.button {
height: 20px;
line-height: 20px;
}
<div class="button">My text</div>
<div class="button">MY TEXT</div>
and the other way
.button {
height: 20px;
display: flex;
align-items: center;
}
<div class="button"><p>My text</p></div>
<div class="button"><p>MY TEXT</p></div>
I use padding attribute, when I am sure, no graphics below the line will be presented. Is there a way, how to align text generally based on its exact content?
Question How do I vertically center text with CSS? doesn't answer this as the solution is based on "line-height" which still takes count graphics below line as I mentioned in my question.
To make your elements vertical center, you can use display:flex with the parent container .button and apply margin:auto to child element.
.button{
height: 150px;
display: flex;
background-color: aliceblue;
}
.button p {
margin: auto;
}
<div class="button">
<p>My text</p>
</div>
Try this::
.button{
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
<div class="button">
<p>My text</p>
</div>
You can use position and transform to align an item vertically inside an other
.button {
position: relative;
}
.button p {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* For horizontal align */
width: 100%;
text-align: center;
}
<div class="button">
<p>My text</p>
</div>
Is there a way to center vertically and horizontally everything automatically inside different container in the same page? I tried use top 50% and vertically-align, but it didn't work. I want to center vertically automatically because if the object/text change size, it will center exactly right place. I succeed center horizontally and I don't want to use top: px;. How do I do that using html5 and css? center everything automatically
no center
vertical-align will only align inline elements relative to each other. It will not work the way you want.
To align vertically just as you show in your image, you need to use display: flex; which has additional css properties which you may find useful.
basically you can use
position: absolute;
top: 50%;
transform: translate(-50%);
for vertical alignment.
But for this to work, the surrounding elements have to have either a fixed height, or if they have a percentage height, also their parent elements and all elements around these all the way up to the body element need to have percentage heights.
Here's an alternative solution that defines table properties for the DIVs. In a table cell the content can be centered not only horizontally, but also vertically (in class .x).
Codepen: http://codepen.io/anon/pen/WwjQZw
HTML:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
CSS:
body {
font-size: 36px;
color: green;
}
.wrap {
display: table;
width: 100%;
}
.row_wrap {
display: table-row;
}
.x {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.head {
height: 200px;
background: #fa4;
}
.middle {
height: 400px;
background: #4af;
}
.bottom {
height: 100px;
background: #a4f;
}
I have a rather trivial task. 3 DIVs with different backgrounds: 1st - top appendix, 2nd - bottom appednix, and 3rd - repeating background. When I leaving content inside this 3 wrappers I've spacers from top and bottom which I can't remove using negative margins. Well, the CSS is:
.cBlock {
background: url('top.png') no-repeat center top;
padding-top: 16px;
}
.cBlock .inner1 {
background: url('bottom.png') no-repeat center bottom;
padding-bottom: 130px;
}
.cBlock .inner2 {
background: url('bg.png') repeat-y center;
min-height: 250px;
}
.cBlock .inner3 {
margin-bottom: -130px;
}
HTML is:
<div class="cBlock"><div class="inner1"><div class="inner2"><div class="inner3">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div></div></div></div>
And results is
You need to close the first and last DIV's immediately.
<div class="cBlock">
<div class="top"></div>
<div class="content">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>
<div class="bottom"></div>
</div>
Now you could position those elements directly (position) or you can use padding and negative margins.
This is also something you could achieve with CSS:
<div class="content">
123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>
/* styling */
.content:before {}
.content {}
.content:after {}
Reset you line-height to line-height:0px to parent and line-height:normal to child
All right !
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Browser support
A Guide to Flexbox
Using CSS Flexible Boxes
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
credit
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
[Where, * is your desired value.]
display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before css attribute to insert a div into the beginning of the parent div, give it display:inline-block and vertical-align:middle and then give those same properties to the child div. Since vertical-align is for alignment along a line, those inline divs will be considered a line.
Make the :before div height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before to .parent .before
If you know the height, you can use absolute positioning with a negative margin-top like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
In my firefox and chrome work this:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/
This worked for me:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
#GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Vertically aligning has always been tricky.
Here I have covered up some method of vertically aligning a div.
http://jsfiddle.net/3puHE/
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
http://jsfiddle.net/dvL512e7/
Unless the aligned div has fixed height, try using the following CSS to the aligned div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
I needed to specify min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.
simplest way to center your div element is to use this class with following properties.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Centering the child elements in a div. It works for all screen sizes
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>
I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.
Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
You place the script just before the content that you want to align!
In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.
I therefore used:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combine this script with
<body onResize="window.location.href = window.location.href;">
and you have a smooth vertical alignment.
Hope this works for you too!
have you try this one?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hope this helps
divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.