I have logo and logo name as text to display. Please see the image below to understand my problem clearly.
Most tips and answers found are using absolute positioning but this doesnt match my requirements.
div class boxes:
Yellow: container , Green: for logo, blue: logo text or logo name as text
All the correct display to achieve are found on the right side of the sample div layout image above.
Problem Summary:
Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the "logo text" at the bottom of the "container"?
Is this possible without positioning the "logo text" to absolute?
For now the div container, logo, and logo text classes are floated left.
I think display: inline-block with vertical-align: bottom; gets you where you want to be;
<div class=logo>logo</div>
<div class=name>name</div>
.logo {
display: inline-block;
vertical-align: bottom;
width: 200px;
height: 200px;
background-color: red;
}
.name {
display: inline-block;
vertical-align: bttom;
width: 300px;
height: 50px;
background-color: blue;
}
Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/
Resize the result window to see the effect.
DEMO
Making your child div's inline-block is the solution. Also you will need to give a max-width and min-height attributes to your container so that it re-sizes to fit your contents. See this solution-
HTML-
<div id="con">
<div id="lo"></div>
<div id="tex"></div>
</div>
CSS-
#con
{
max-width:310px;
min-height:140px;
background:yellow;
border: 1px solid aqua;
}
#lo
{
width:140px;
height:140px;
background:green;
display:inline-block;
vertical-align:bottom;
}
#tex
{
width:160px;
height:60px;
background:orange;
display:inline-block;
vertical-align: bottom;
}
Related
JS FIDDLE Example
http://jsfiddle.net/2adv2/
Update on Vertical Align
Vertical Align works until the max-width is not reached. When the image width is at max width, and if I resize to increase the window height, the image doesn't shift to the middle of the div, but the div expands.
I am facing 2 issues
Vertical align is not happening
The image moves down a little from the div and kinda overflows when I resize the window a lot - squishing the webpage vertically.
Tell me why this happens. Also vertical align just wont work.
CSS:
#heroimg {
position:relative;
top:0%;
height:auto;
vertical-align:middle;
max-height:100%;
max-width:100%;
}
#hero {
position:relative;
top:0%;
bottom:40%;
height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
HTML:
<div id='hero'><img id="heroimg" src="assets/images/dfb.jpg"></div>
I'm afraid you can't use vertical-align to vertically center things in containers.
However, you can use display:table and display:table-cell with vertical-align:middle to work as you are expecting.
This requires two wrapping div tags around the image that you want to center.
The following illustrates the basic technique:
CSS:
#outer-wrapper {
display: table;
width: 100%;
}
#inner-wrapper {
display: table-cell;
vertical-align: middle;
}
img {
margin: 0 auto;
max-width: 100%;
height: auto;
}
HTML:
<div id="outer-wrapper">
<div id="inner-wrapper">
<img src="image.jpg">
</div>
</div>
See fiddle with this technique applied to your example: http://jsfiddle.net/2adv2/1/
add max-height to the #hero so the div resizes together with the img
#hero {
position:relative;
top:0%;
bottom:40%;
max-height:40%;
text-align:center;
overflow:hidden;
background-color:yellow;
}
I'm working with a div that's only holding text. It's using absolute positioning to center itself on top of an image div that is using relative positioning . I can center the div horizontally in CSS if I use
div {
text-align:center;
width:100%;
}
But when I try to center it vertically using
div {
text-align:center;
height:100%;
}
it doesn't vertically center. I'm guessing this is because text-align:center only specifies horizontally.. How could I get around this? I've seen a couple solutions that would work if the outer div is a fixed size, but the outer div is not a fixed size. It's fluid so I need this to work fluidly as well. I've tried using top:50% but I want it perfectly centered... I'm pretty inexperienced so go easy on me
As you guessed, you are right, text-align: center; is used to align the text/element horizontally only and not vertically... so if you are talking about aligning the single line text vertically than you need to use line-height, which will be equal to the container height
Demo
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
line-height: 100px;
text-align: center; /* Forgot this in the demo */
}
Where as if you are looking to vertical align entire element, than you can use either position: absolute; which I won't suggest you, instead use display: table-cell; nested inside display: table; parent
Demo 2
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Try this...
div { position:absolute; top:50%; }
and go through
http://phrogz.net/CSS/vertical-align/index.html
Try this one. Make the code as
div { text-align:center; line-height:100%; }
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
I have a container which is 100px by 100px. I have put an image in it which I don't know the dimensions, except the fact that I have set the width to 100px. I would like to find a way in CSS to vertically align this image middle in it's container. I have stuck overflow:hidden on the container to prevent it from showing anything outside the square.
I have found something on here on how to do the opposite (width, not height).
Wrap the image inside two divs that will mimic an html table. The outer div will have display: table property, and the inner will have display: table-cell property. You can set the vertical-align property of the inner div to be top, middle, or bottom.
HTML:
<div class="table">
<div class="table-cell middle">
<img src="https://www.google.ca/images/srpr/logo3w.png" alt="" />
</div>
</div>
CSS:
.table {
display: table;
width: 100px;
height: 100px;
border: 1px solid blue;
}
.table-cell {
display: table-cell;
}
.middle {
vertical-align: middle;
}
img {
width: 100%;
outline: 1px solid red;
}
Here's the fiddle.
You would need to know the height of the image to vertically align it as you would then use this CSS:
div {
position:relative;
overflow:hidden;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx /*(where XXX px is half the height of the image)*/
}
I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem
Demo: http://jsfiddle.net/a5hP3/
Here's code anyway:
HTML:
<div class="box">
put it down, in center of box
</div>
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
}
.box a{
vertical-align:middle; //doesnt work
}
You can set the line-height equal to the height:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
line-height: 300px;
}
http://jsfiddle.net/a5hP3/3
There are two solutions:
First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.
Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:
<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
Some Text
</div>
SEE DEMO
CSS:
.box
{
width: 200px;
height: 300px;
border:1px solid green;
position:relative;
}
.box a{
display:block;
position:absolute;
top:45%;
left:10% /* adjust based on link width */
}
Make the line-height the same as the container height...
http://jsfiddle.net/a5hP3/1/
Note: This solution only works when there is one line of text.
This is a problem better handled by javascript. (I'm using jQuery here):
http://jsfiddle.net/a5hP3/15/