I have this structure (simplified):
<div id="outer" style="display: table-cell">
<div id ="someOtherDiv">.......</div>
<div id="inner" style="text-align: center; vertical-align: middle">
<img src="path" />
</div>
</div>
I need IMG to be centered both vertically and horizontally.
Image is centered only horizontally but vertically in screen.
What else should I add to accomplish this?
Of course, if I set BODY to be 100% height, and then inner div to be also 100% height it works, but the fact is that I cannot actually add 100% height to BODY tag, so I need to do this only changing some style to INNER div.
I thought if OUTER div is table cell, ideally, vertical align style should work, but it doesn't. In fact, when using Firebug, I can see that OUTER div expands to all screen and INNER div only ocuppies the IMG space.
Any suggestion?
...
<div id="inner" class="flexbox; align-items: center">
<img src="" class="vertical-align: middle"/>
Perhaps using flexbox and align-items for the inner div and then align the img vertically in the img tag. But also consider width, padding, and height for settings to control the maximum much space the images need.
Related
I have a horizontally scrolling container with several inline-block divs, each containing an image. The Image is set to height:100% and width:auto. The problem is the inline-blocks aren't taking the width of the image. They seem to be using the native image width rather than the rendered width.
.container {height:300px; overflow:auto; white-space:nowrap;}
.container div {display:inline-block; height:100%;}
img {height:100%; width:auto;}
<div class="container">
<div>
<img src="example.jpg"/>
</div>
<div>
<img src="example.jpg"/>
</div>
</div>
https://jsfiddle.net/8mL0yx56/3/
The whole thing is inside a flex item, which seems to be what's causing it. Any way to stop this?
.flex-item {height:100%;}
It can solved you problem.
You set .container {height:100%;}, but its father,.flex-item, doesn't have height.
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
I'm sure this is a very simple thing but I've been banging my head against it all day, so I decided to just ask.
I have some divs that I would like to align to the right within their parent div. "text-align: right" works if I don't specify a width:
<div style="text-align: right;">
<div>
This text aligns to the right
</div>
</div>
But if I put a size in pixels on the inner element, it does not:
<div style="text-align: right;">
<div style="width: 200px;">
This div stays on the left
</div>
</div>
What am I missing?
Actually, text-align affects the inline elements including the text.
From the MDN
The text-align CSS property describes how inline content like text is
aligned in its parent block element. text-align does not control the
alignment of block elements itself, only their inline content.
In the first case, the inner div inherits the text-align property from the outer div and applies that to its inline elements,
I.e The inner div is not aligned itself to the right or left. But as it fills the entire horizontal space of its parent, you'll see the text is aligned at the right side of the outer div.
In the second case, the inner div has an explicit width and it doesn't fill the entire horizontal space of its parent anymore, and the text-align is applied to the text not the div itself.
If you want to move the inner div to a side. You have two choice:
Use float: right for the inner and clear the float at the end of the outer div. Working Demo
Use display: inline-block for the inner and text-align: right for the outer div.
Working Demo.
The text in your second example is indeed aligned to the right. The problem is that its containing element is given a specific width so it is aligned to the right of the div with the specified width.
I believe you are looking to float the inner div element to the right since text-align does not apply to block-level elements:
<div style="text-align: right;">
<div style="width: 200px; float: right;">
This div does what I want!
</div>
</div>
In the above code, text-align: right, could also be applied to the inner div and achieve the same result (unless there are other inner elements that need the CSS).
Here is an example of all three methods: http://jsfiddle.net/6KDC4/
I am using 960.gs, and want to vertically align an IMG. My sense is that
the IMG within the first DIV of grid_3 has no idea as to the height of the
rest of the row (the div of grid_6 suffix_3). The image hugs the top...
Some constraints: I may not know the height of the image. I may not know the
height of the content in the DIV to the right.
Without resorting to javascript, what's a good approach that wont break 960.gs?
Is this where I go to a nested container, just so that I can vertically center an
IMG? I have tried the css rule:
img {
vertical-align: middle;
}
There's obviously more to it....
Snippet...
<div class="container_12">
<div class="grid_3">
<img src="images/dlsmug5.png">
</div>
<div class="grid_6 suffix_3">
<h1>My Title - etc...</h1>
<p>
Heya, revamp time! It may not be obvious, but...,
I am coming up to speed with the CSS framework
of The 960 Grid System ..
</p>
</div>
<div class="clear"></div>
You can give to the div a table-cell behavior with a vertical align:
.grid_3 {
display: table-cell;
vertical-align: middle;
}
How do you Horizontally center align a DIV that is absolutely positioned in another DIV ?
HTML
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute;"></div>
</div>
Thank You
My answer works only if the background of the inner div has no background color. As your example does, I add a third div. The second one is for the centering, the third one is for the coloring.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px">
<div style="background:blue;padding:0px;"></div>
</div>
</div>
The important thing to notice here is: padding-left:50%;margin-left:-50px;. -50px being half of you div's width.
<div style="width:250px;height:250px;background:red;position:relative;">
<div style="width:100px;height:100px;background:blue;position:absolute; margin: auto;"></div>
</div>
the margin auto should center your div both horizontally and vertically
If you know the sizes of each div and you plan to continue to use position:absolute;, you just set the top and left coordinates. So something like this in the inner div
top:75px; left:75px;
http://jsfiddle.net/jasongennaro/zQjaU/
*May be off a few px. You may need to adjust.