https://jsfiddle.net/93hjyhs8/
I'm trying to vertically center the text on the right, but having great difficulty finding a pure CSS solution that works in all browsers.
The height of the .block element should be dynamic and expand to the size of the tallest child element (currently .thing1).
Note, that if possible I would prefer to avoid hacks such as using tables, but feel free to post those kind of solutions regardless.
Also, why is the element not only at the bottom but also slightly nudged down?
.block {
width: 500px;
background: yellow;
}
.thing1 {
height: 100px;
width: 40%;
background: blue;
display: inline-block;
}
.thing2 {
background: red;
width: 60%;
vertical-align: top;
display: inline-block;
}
<div class='block'>
<span class='thing1'></span><span class='thing2'>Hello world how are you today r u alrite m8 i think u r weak m8</span>
</div>
demo - https://jsfiddle.net/victor_007/93hjyhs8/1/
add vertical-align:middle for both the inline-block elements
You could use the new awesome css flexbox,
.block {
width: 500px;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
}
Demo: https://jsfiddle.net/3y41ot0b/
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 10 months ago.
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
You can do it in multiple ways. I'll start with grid because I love grid.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Grid layout enables an author to align elements into columns and rows.
If you want all the elements contained in an element to be vertically centered you can use on the parent element the property display: grid; and after the property align-items: center;. For example see this code:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: grid;
align-items: center;
}
div {
height: 100px;
width: 100px;
background-color: brown;
}
<section>
<div></div>
</section>
if you want a specific alignment for each element, you can avoid specifying the property align-items: center; for the parent element and use the property align-self: center; directly on each element it contains. See this example:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: grid;
}
div {
height: 100px;
width: 100px;
background-color: brown;
align-self: center;
}
<section>
<div></div>
</section>
another way is through the use of flexbox. The principle is more or less the same.
you can apply a rule that applies to all contained elements:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: flex;
align-items: center;
}
div {
height: 100px;
width: 100px;
background-color: brown;
}
<section>
<div></div>
</section>
or specify the position of each:
section {
height: 90vh;
width: 100%;
background-color: blue;
display: flex;
}
div {
height: 100px;
width: 100px;
background-color: brown;
align-self: center;
}
<section>
<div></div>
</section>
If you want to learn more about these topics I leave you the link of the site from which I learned them: https://developer.mozilla.org/en-US/docs/Learn
I hope I have been helpful!
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 4 years ago.
When a div is next to another larger one in the same container, the smaller one stays at the bottom. I would like it to start from the top, any idea how to do that?
See the example below. I would like the red box to come all the way up, of course without using something like position-relative then just moving it up in px or em
Bonus points if someone can explain where the spacing between my boxes come from since I did not specify any padding or margin ;)
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
vertical-align works on elements that are display: inline-block; - so simply add vertical-align: top;
As for the spaces, that's the "whitespace" between your elements, which exists because the divs are on separate lines. There's a handful of solutions to this, one of which is simply keep the closing </div> and opening <div> immediately adjacent (like so: </div><div>), which I have implemented in the snippet below.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
vertical-align: top;
background-color: green;
}
<div class=container>
<div class=small></div><div class=big></div>
</div>
The best solution to problems of container and child item layout is CSS Flexbox. Note that I added display: flex and align-items: flex-start to your container. That second one has the magic which aligns all child items to the top. Follow the link above for a very helpful reference. Also note that your spacing issue is fixed.
.container {
background-color:blue;
width: 700px;
height: auto;
display: flex;
align-items: flex-start;
}
.small {
width:200px;
height:200px;
display:inline-block;
background-color:red;
}
.big {
height: 400px;
width:400px;
display:inline-block;
background-color:green;
}
<div class=container>
<div class=small></div>
<div class=big></div>
</div>
There may be a better solution out there, but if you float each element left it will give you your desired output.
.container {
background-color: blue;
width: 700px;
height: auto;
}
.small {
width: 200px;
height: 200px;
display: inline-block;
background-color: red;
}
.big {
height: 400px;
width: 400px;
display: inline-block;
background-color: green;
}
.left{
float: left
}
<div class="container left">
<div class="small left"></div>
<div class="big left"></div>
</div>
Just add vertical-align: top; to both elements.
Also the space is added because both elements are inline-block and are considered as text elements, you can fix that by setting font-size to 0 to the parent element, like that:
.container{
font-size: 0;
}
And don't forget to set the right font size to the child elements if you're going to add some text to them, example :
.small, .big{
font-size: 16px;
}
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>
Started a project involving a 3-column div at the top - 300px/dynamic/350px. The right div falls below the others: http://jsfiddle.net/tspencer103/b49mfno4/1/.
I have tries several suggestions here like http://jsfiddle.net/22YBU/. No luck. Any suggestions? Thanks.
div #div_1 {
float: left;
height: 50px;
background-color: red;
width: 300px;
}
div #div_2 {
height: 50px;
margin: 0px 350px 0px 300px;
background-color: green;
text-align: center;
}
div #div_3 {
float: right;
height: 50px;
background-color: blue;
width: 350px;
}
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>
If you're interested in a simple, more modern approach, drop the floats and use flexbox:
HTML (no changes)
<div id="container">
<div id="div_1">LEFT STATIC 300px</div>
<div id="div_2">CENTER DYNAMIC</div>
<div id="div_3">RIGHT STATIC 350px</div>
</div>
CSS
#container {
display: flex;
}
#div_1 {
background-color: red;
width: 300px;
height: 50px;
}
#div_2 {
background-color: green;
text-align: center;
height: 50px;
flex: 1; /* flexible width */
}
#div_3 {
background-color: blue;
width: 350px;
height: 50px;
}
DEMO
Flexbox benefits:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning elements
it's responsive
unlike floats, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
I have a div that I want to center horizontally and vertically.
For the horizontal issue everything is great, but I have a problem with the vertical alignment.
I tried this:
#parent {
display: table;
}
#child {
display: table-row;
vertical-align: middle;
}
but this doesn't work.
If you only have to support browsers that support transform (or its vendor prefixed versions), use this one weird old trick to vertically align elements.
#child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you have to support older browsers, you can use a combination of these, but they can be a pain due to the differences in rendering block vs table.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
If your height is fixed and you need to support those really old, pesky browsers...
#parent {
position: relative;
}
#child {
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
If your height is not fixed, there is a workaround.
See it on jsFiddle.
Having the parent property as, display:table and child property as display: table-cell and vertical-align: middle worked for me.
You can use flexbox to center horizontally or vertically your child div inside a parent div:
This should be your html:
<div id="parent">
<div id="child">
info
</div>
</div>
And this is the css with flexbox:
#parent{
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100vh;
background: lightgray;
}
#child{
position: relative;
background: black;
padding: 2rem;
color: white;
box-shadow: 5px 5px 20px rgba(0,0,0,.4);
border-radius: 5px;
}
Here is de codepen: https://codepen.io/bongardabo/pen/YzZQgaJ
First off, treating non-table markup as tables (with display:table and friends) isn't cross-browser. I don't know which browsers you need to support but certainly IE6 won't do this. But, if your targeted browser do all support display:table I can give you some tips.
The vertical centering approach you're looking for (using table layout) depends on having a TD with vertical-align:middle, then inside of that a single block element will vertically center. So I think what you want is:
#parent { display:table-cell; vertical-align:middle; }
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ }
It's ok to use table-cell with no surrounding table-row and table, the browser infers the needed table wrapping elements for you.
here is another way when you don't know the inner div size or whatever, you may use % here and there to fix the "centering" ....
the idea is that your top value is half the height of your child element as to create the centering illusion
Here's the code:
<div id="parent">
<div id="child">
hello
</div>
</div>
and for the styling:
#parent {
position: relative;
height: 300px;
width:200px;
background-color:green;
}
#child {
height: 50%;
width: 50%;
position:relative;
top:25%;
left:25%;
background-color:red;
}
Here you can see it in action
http://jsfiddle.net/Wabxv/