This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
center div vertically in a % height div?
I am trying to use the solution here: center div vertically in a % height div?
however I want the header to be at the top of the div and that solution puts the header centered with the select...
What I want is the header to remain at the top, and the select to be vertically and horizontally centered and the total height of the outside div to be 100px.
What I tried is on the fiddle below...
jfiddle: http://jsfiddle.net/kralco626/K8wWa/1/
Using the partial solution in the comments :
Look at this jsFiddle
To have horizontal align, you'll have to put your display:table-cell div in a display:table div.
since we can't trust jsFiddle to always be around, here's the result:
<div id="d1">
<h3>header</h3>
<div id="table">
<div id="d2">
<select><option>Status</option></select>
</div>
</div>
</div>
Css
div#d1 {height:100px;width:100%;border:2px solid black}
div#table {display:table; width:100%;text-align:center}
div#d2 {
display:table-cell;
vertical-align:middle;
height:80px;
}
h3{background:red;text-align:center}
Related
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 7 years ago.
I have this page:
http://invata.dac-proiect.ro/invat/index2.html
I want my div .container-home to be align vertically to the center.
CODE HTML:
<div class="container-home" style="width: 900px;height: 696px;background: url(DECUPATE/TEST/images/ppp.jpg);margin: 0 auto;background-size: contain;">
<div class="margine">
<div class="sus">
<div class="btn"></div>
<div class="btn2"></div>
</div>
<div class="jos">
<div class="btn3"></div>
<div class="btn4"></div>
</div>
</div>
</div>
How do I do this?
I found these examples but we did not implement them.
http://www.vanseodesign.com/css/vertical-centering/
Thanks in advance!
EDIT:
I add:
body{display table;}
.container-home{display:table-cell;vertical-align;middle;}
but not working.
You need to use some savvy positioning in your CSS. Add the following to your container-home class in the CSS:
.container-home {
/* existing code */
position:relative;
top:50%;
transform:translateY(-50%);
}
The entire body of the page should be vertically and horizontally centered now.
This question already has answers here:
Using display inline-block columns move down
(2 answers)
Closed 9 years ago.
I have three inline-block divs like this:
<div style="display:inline-block">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block">div3</div>
I added a padding to the second div to display it a little lower, but this makes others divs to go down as well. How to make only the second div to display lower?
Here is a JSFiddle: http://jsfiddle.net/mY6hP/
The same thing was asked here, but the accepted answer suggests using absolute positioning, which i would not like to do.
Change the alignment on the other divs so they allign themselves at the top (via vertical-align:top;):
<div style="display:inline-block; vertical-align:top;">div1</div>
<div style="display:inline-block; padding-top:5px">div2</div>
<div style="display:inline-block; vertical-align:top;">div3</div>
Try float:left instead of inline-block display:
<div style="float:left">div1</div>
<div style="float:left; padding-top:5px">div2</div>
<div>div3</div>
Okay, so this question has been asked and answered many times, yet I still can't produce a working solution.
I'd like to vertically align to the middle arbitrary elements in a DIV. So, the linked-to tutorial in the above question says:
Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Except contrary to what the screenshot on the tutorial shows, this doesn't work. The only thing I changed was to add a border around the outer DIV, so you can see the vertical alignment.
All this does is produce a zero-height DIV which renders like a straight line. If you add a height to the outer DIV, you can see the inner content, but it doesn't actually vertically align the content. So, why doesn't this example work?
I believe your containing div also has to have a specified height. If you inspect the #myoutercontainer div with firebug you see that it actually has a height of 13em, which they don't show in the example code given.
Here's a different approach based of this Chris Coyer article. If you want to vertically center the text to a fixed size div, then you can just repeat the process like so. If you want it to align to the right, just turn modify the "text-align: center;" style for myoutercontainer.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Make outer div be automaticly the same height as its floating content
Hi I have code like this
<div id="wrapper">
<div id='float-left-1'>...</div>
<div id='float-left-2'>...</div>
<div id='float-left-3'>...</div>
</div>
When I run this page it happens that wrapper is not around divs inside... How can I solve this? Float divs are over the wrapper...
Thanks for answer in advance!
I solved the problem...
All the float divs were added:
position: relative;
float: left;
at the end I have added:
<div style="clear:both"></div>
and now it works perfect... it did the trick!