I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
try this and check this fiddle
.box {
width: 40%;
margin-left: auto;
}
I'm not 100% on what you are asking for, but here is a JSFiddle using p elements inside of one div.
https://jsfiddle.net/3ct2syhp/
CSS
.box {
display: inline-block;
margin-left: 50%;
}
HTML
<div>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p class="box">
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
<p>
I want a container block with the same width as that of its longer child. The block most be posionated to the right with its content align to the left (as in the image). Is there a way to accomplish this with no float property and using only one div?
</p>
</div>
The elegant way:
div {display: table; margin-left: auto; text-align: left;}
Related
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
I am really struggling with this and I have no idea why. I want to have text and an image on 1 line and centered inside a 100% width div. Here's a jsfiddle..
http://jsfiddle.net/JnbeJ/
floated elements automatically become block-level. It's impossible to center them via text-align: center. The only way for you to do is to make them inline-block like so: display: inline-block. I added vertical-align: top; for the h to be at the top. The working example is here: http://jsfiddle.net/skip405/JnbeJ/4/
Your image and text can't float left and be centred at the same time...
You have a div that is 100% width (btw/ divs are 100% to begin with), and trying to center a div inside it that is also 100% width. You can either put a width on the inner div, or make it inline-block.
Updated fiddle.
You are using a wrapper with class name "centered" so instead of making both elements (display: inline-block;), just add this to style your wrapper:
.centered {display: inline-block; margin: 0 auto;}
You also have an additional (text-align: center;) in your containers css that does not need to be there.
I have a set of elements inside a parent element. The parent element's height can change (it will be changed by some jQuery files). Here is how the layout looks:
<div class = "parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
I want the child elements to end up aligned at the middle of the parent div, but i can't figure out how to write the css to do so. I have tried writing things like:
.child1 {
...
vertical-align: middle;
}
Which doesn't work. I have also tried:
.parent {
display:table;
}
.child1 {
display:table-cell;
vertical-align:middle;
}
This also doesn't work. Any ideas how to do this?
You can create a wrapper for the elements you wish to center inside a container that gets centered instead like so:
HTML
<div class ="parent">
<div class="centerme">
<div class="child1">
....
</div>
<div class="child2">
....
</div>
</div>
</div>
Then you can simply do this:
CSS
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Demo. Method found over at CSS-tricks.
Check this link : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
this will bring your child div's top to 50% of the container. just add margin-top: -(x)px; where (x) is half of your child div's height.
You have forgotten to apply the same styling on child2 as on child1, like so:
.child1, .child2 {
display:table-cell;
vertical-align:middle;
}
Here is a jsfiddle: http://jsfiddle.net/D853q/1/
This is slightly more complicated than your standard "how do I vertically align a single div inside a parent container."
If you have a multiple number (which can change) of child elements that need to be aligned vertically or if your parent container's height changes, then you will need to use Javsacript/JQuery to set the position as there is no "standard" way to apply a middle vertical alignment to multiple child elements inside a parent container utilizing just CSS.
EDIT: I've been proven wrong, you can apparently with using :before pseudo-element, but it won't work in IE7 unless you hack around it.
I've implemented this in a fiddle: http://jsfiddle.net/rJJah/20/
Key parts
Each Child element has a position:relative. This is important because certain child elements may have variable height, and this eliminates the need to calculate the top position separately for each.
Everytime you change the height of the parent container, you will need to rerun the height calculations and setting the top offset to each child.
I have a floated container with multiple child floated divs.
I want to center align (not text-align) all these floated child divs with respect to the floated container.
How do I do that ?
At a time, only 1 of these child div is visible on the browser ..User clicks on Prev/Next to view other child divs (kind of like Carousel)
Apparently I am facing issues center aligning if I use float:left for the child div.
You cannot align a floated element relative to a parent element.
The float CSS property rips an element from its context in the document (similarly to position:absolute/fixed). As a result of this, the element cannot be positioned "at the center of the parent".
I was searching for a solution today for my three divs inside a parent container and I came across this old post where a good solution doesn't seem to have been offered.
My situation: I have a parent container with width:100% so that it fits the screen. I also set a max-width so that the parent container doesn't grow too large. At the max-width I want the three child divs to display all in one row.
As the page is reduced and the parent container shrinks in width, I want the three child divs to reflow, each child div being pushed under the previous child div until they are all stacked vertically. As this happens I want the child divs to stay center aligned within the parent container.
The solution is to not use float which "rips an element from its context" as Rob W truly states, but instead use inline-blocks:
.parentContainer{
margin:0 auto; /*keep centered in page*/
width:100%; /*stretch to page*/
max-width:800px; /*expand up to 800px*/
text-align:center; /*keep my children centered*/
}
.childDiv{
display:inline-block /*treat me as a block that flows like text*/
width:230px; /*set my size*/
vertical-align:top; /*keep me aligned at the top of my parent even if my siblings are taller than me*/
}
<div class='parentContainer'>
<div class='childDiv'>Content 1</div>
<div class='childDiv'>Content 2</div>
<div class='childDiv'>Content 3</div>
</div>
You can float the parent container, give it absolute positioning, pretty much whatever, and the child divs will keep their same behavior.
cheers
If you show only one child div at once, probably they don't need to float. The best way to center a non-floated block inside of another block is to assign the following style:
.child {
margin: 0 auto;
}
This will center the div.child because both left and right margins will span equally to fit the parent container. Similarly, you can align divs to the left and to the right:
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
If you have a fixed width for both container and children, then you can use margin-left and margin-right set to (container div width - contained width width)/2. Of course, if you have paddings and borders, you have to account for them in the formula.
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.