Buttons have a magic property where you can use margin: auto on them without setting a width. I'd like to be able to do this with a div. Is it possible?
div, button {
background-color: #FFA;
display: block;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
They do this by having a sort of magic internal sizing function which makes them only as big as their text:
Why doesn't "display: block" & "width: auto" stretch a button to fill the container?
I would like to know if I can make a div do this, without wrapping it in any containers (I know flex box around it would work).
Can I make a div shrink to text-width like a button, while still being display block, without necessitating a specific container?
EDIT: inline-block will not work for my use case.
Simply set a width on the <div> of fit-content:
div,
button {
background-color: #FFA;
display: block;
margin: auto
}
div {
width: fit-content;
text-align: center;
}
<div>Center me</div>
<button>I Center Magically</button>
Use display:table and you will have better support than fit-content (it doesn't work on Firefox, Edge and IE)
div,
button {
background-color: #FFA;
display: table;
margin: auto
}
<div> Center me </div>
<button> I Center Magically </button>
buttons will have inline-size:fit-content by default.
width:fit-content dose the same effect.
I have an answer on another question, where you can find spec ref.
Related
I know how to vertical align the text by reducing the height of inner div and assigning it absolute positioning with top,bottom,left,right= 0,margin:auto properties
I also know display:flex layout but it also does not work properly.
problem is display:table and vertical-align does not work properly with bootstrap classes. My div is simple i assigned it proper height , my inner div has reduced height so it should vertically align but it does not. I used bootstrap. I do not want to use absolute position to center it. Any idea?
<div class="col-sm-3" style="height:65px;display:table;vertical-align:middle;">
<div style="display:table-cell;vertical-align:middle">abcabcabc</div>
</div>
When you are using bootstrap, vertical align is done with "display: inline block"
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
You can check here - http://plnkr.co/edit/vPKRjAf4wgtzJ7VVdOPN?p=preview
what about using line-height? if line-hight is equal to its hight the text is centered vertically
#test {
width: 100%;
height: 100px;
background-color: green;
line-height: 100px;
font-size: 32px;
text-align: center;
}
<div id="test">
Test Text
</div>
Hope this helps
Problem was with my div , i set its dimensions upon removing stuff, things worked out. Thanks.
I’ve got an online photo gallery. The thumbnail page is a grid of 150px x 150px divs, the thumbnail images are set inside them.
Since the thumbnail images are rectangular, the ideal thing would be to auto-center them inside the divs.
Reading here, I’ve figured out how to center them horizontally. I’ve also been reading that auto-centering vertically isn’t possible until CSS3 takes off. Is this true?
I've gotten the horizontal images to auto center with this:
.portrait_t {
width: auto;
height: 150px;
text-align: center;
display: block;
margin: 0 auto 0 auto;
}
But, the vertical centering doesn't work with this:
.landscape_t {
width: 150px;
height: auto;
display: block;
margin: auto 0 auto 0;
}
If there's just no way to do this until CSS3 then I'll have to come up with a workaround, but if I'm missing something, please let me know.
Thank you all in advance for your help!
You have an inline element (the <img>) that is inside a sized parent <div> element:
<div>
<img />
</div>
All you need to do is to make it center and middle aligned. You center it with text-align:center; in the parent <div> and you middle align it by giving the <div> the line-height of it's full height. Additionally, as it's an <img> tag you give that image tag the vertical-align:middle; that done it's in there, regardless of it's own size:
Example/Demo:
<style>
div {width:350px; height:350px; line-height:350px; text-align:center;}
div img {vertical-align:middle;}
</style>
<div>
<img src="http://i.imgur.com/PKnWs.jpg">
</div>
<div>
<img src="http://i.imgur.com/Az6NUl.jpg">
</div>
I am trying to set a div element on the right top of a web-page which contains a span, a label and a button. I want to bring all the elements in alignment regarding the vertical high (preferably at the middle of the div element). However vertical-align: middle does not work as the elements are cling to the top of the div. They are probably influenced by an external div or Panel (since I use gwt). Should I interfere in the default attributes of the gwt widgets? What other solution can you suggest?
The code:
<div class="{style.topRightDisplay}">
<span style="float:left;">Eingeloggt als: </span>
<g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
<g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
</div>
.button {
float: right;
margin-right: 15px;
}
.loginHTML {
float: left;
}
.topRightDisplay {
float: right;
height: 20px;
width: 200px;
vertical-align: middle;
}
You misunderstand the purpose of vertical-align. See the explanation of vertical-align on MDN
You need to apply vertical-align to the child elements, not the parent.
Without knowing what your markup looks like, I suggest this:
.topRightDisplay input,
.topRightDisplay button,
.topRightDisplay span{
vertical-align: middle;
display: inline-block;
}
You should also remove the floats. Floats make an item render as a block-level element, which means vertical-align won't work.
Instead you can use display: inline-block. You may need to change the order of the elements in hmtl to get the result you want.
This has probably been done before but I can't find a solution for my specific case. I have the following:
<div class="holder" style="height:260px;width:260px;">
<img src="image.jpg" />
</div>
How can I get the image to align into the middle of the div?
Normally, img is an inline-element, which means, that it's being aligned to the baseline of the text of your parent-element. This leaves a nasty space underneath your image.
You can prevent this with
img{
display:[inline-]block; /* or inline-block if the img isn't the only element in your div*/
}
This removes the reserved space underneath the image.
you can change the alignment by
img{
vertical-align: [top|middle|bottom|baseline|...] ;
}
to align it according to your text.
In general, you can only vertical-align inline elements. So an image with display:block won't be affected by a vertical alignment declaration.
Add
text-align: center;
vertical-align: middle;
display: table-cell;
to the div's style.
Try :
.img
{
display: block;
margin-left: auto;
margin-right: auto
}
If this is your mark up then you can use line-height property for this. Like this:
.holder{
line-height:260px;
}
This is my relevant page markup:
<div id="header">
<div id="logo">
Home
</div>
<div id="user_box">
test
</div>
</div>
And my relevant CSS:
#header {
width: 960px;
height: 110px;
}
#logo {
background: url('/assets/img/logo.png') no-repeat center;
width: 300px;
height: 110px;
float: left;
}
#user_box {
width: 300px;
height: 60px;
float: right;
vertical-align: middle;
}
Now, I want to position the user_box div in the vertical middle of the header div. After a lot of Google'ing and experimenting, I have learned that this isn't easy. Apparently, I can't vertical align a block element such as a div. So I'm looking for a different way to do this.
I saw the hacky display: table; method and tried using it, but it didn't change a thing. Also tried changing the element to an inline element like a span, but that didn't work either. I even tried using margin: auto 0; for some god awful reason, and that also didn't work at all.
So I'm asking for help. How do I vertically align this div inside my header div?
Thanks!
Set the line-height of user_box equal to the height of header
Working demo: http://jsfiddle.net/AlienWebguy/pyppD/
vertical align doesn't work with divs its for aligning elements in tables. In your case you could just use this
#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/
So I fiddled around with your code a little bit, and here's what I got: http://jsfiddle.net/3k8XE/
As you can see I'm using a table as the header, and applying the same id to each element, except the two inner divs have changed to td's. I've added an inner td to compensate the space between the two divs since they were originally set to float:left/right.
(Of course the borders are just to show what's actually going on here.)