I went through so many things about this. But still could not find any solution.
In every solution some restrictions are there. Can anyone provide a generalized and easiet css code for my problem to put a html link button vertically center inside an div?
As below in the image, the create an account button is at the middle of the div google header-bar :)
You need to set line-height the same like height, and also display: inline-block
Here is a fiddle.
If you are using sass, then it is easy to write a mixin (in sass format):
=button($height: 40px)
height: $height
line-height: $height
You can combine display:table-cell and vertical-align:middle
<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
<a href="#link">
<img src="" />
</a>
</div>
Just set the heights and margins appropriately.
sample fiddle
<div id="a">
<div id="b">bbb</div>
<div id="c">ccc</div>
</div>
#a {
overflow: auto;
background-color: yellow;
height: 100px;
}
#b {
height: 80px;
background-color:red;
width: 50px;
float: left;
margin-top: 10px;
}
#c {
height: 50px;
background-color: blue;
width: 80px;
float: right;
margin-top: 25px;
}
There is this trick I do a lot:
.valign-content:before {
content : '';
display : inline-block;
width : 0; height : 100%;
vertical-align : middle;
}
.valign-content>* {
vertical-align : middle;
display : inline-block;
}
heres the demo: http://jsfiddle.net/pavloschris/5g3Cz/
Does the trick for me...
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I have 2 divs and I want to align them in the same line. The html code is:
<div class="box">
<div class="boxleft"> </div>
<div class="boxright"> </div>
</div>
I tried 'float: left;' and 'float: right;' but the background is going crazy, it apears just on ~30px of the height. I tried to put a height('till then I didn't use height in CSS). It didnt' work. I tried 'display: inline-block' too, but without succes.
Thanks.
CSS:
.box {
width: 956px;
margin-left: auto;
margin-right: auto;
background: #584231;}
.boxleft {
width: 706px;
margin-right: auto;
border-right: 2px solid black;}
.boxright {
width: 250px;
margin-left: auto;
float: right;}
Float: left should do the trick depending on the width of the parent boxand the width of boxleft and boxright. If the parent box has width: 500px; and boxleft and boxrightboth have width: 250px; float:left;. You should be fine.
Have a look at the css properties float:left and clear:both.
http://www.w3schools.com/css/css_float.asp
I put some colors on each background to make it clear, you're maybe lacking a width and height for each element..
.boxleft , .boxright {
float : left;
width : 200px;
height : 100px;
margin : 10px;
}
.boxleft {
background : yellow;
}
.boxright {
background : blue;
}
http://jsfiddle.net/n9mHX/
On most modern browsers nowadays display: table-cell is the better alternative to floating.
You may use
display:inline-block;
or
float
or as per latest browser out you may use
display: table-cell
or you may use
clear: both
If you're not a "CSS guy", look at http://twitter.github.io/bootstrap/. With bootstrap, put two div on the same line is done this way :
<div class="row-fluid box">
<div class="span6 boxleft"></div>
<div class="span6 boxright"></div>
</div>
You need to clear the floats via clearfix on the parent container.
.box {
width: 956px;
background: #584231;
}
/* clearfix */
.box:after {
content: '';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.boxleft {
width: 704px;
border-right: 2px solid black;
float: left;
}
.boxright {
width: 250px;
float: right;
}
The border is adding 2px to your divs width. That's why I specified it with 704px.
Using inline-block as display for the left and right box should work too.
<div id="home">
<div id="logo"></div>
<div id="foot">
<div id="one">
<span id="aaa" class="test">aaa</span>
</div>
<div id="two">
<span id="bbb" class="test">bbb</span>
</div>
</div>
</div>
#home {
width: 400px;
height: 400px;
}
#logo {
height: 200px;
background-color: green;
}
#foot {
height: 200px;
}
#one {
height: 200px;
width: 200px;
background-color: red;
}
#two {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
.test {
margin-top: 50px;
margin-left: 50px;
background-color: yellow;
}
why in this example float: left doesnt working? and why margin-top set position of #home and not of parents?
LIVE: http://jsfiddle.net/tLuTS/10/
Floating doesn't work in your example because you need to float both elements that you want on the same line.
So I've updated your example with #one and #two floated left. Also added some IE float fixes. http://jsfiddle.net/tLuTS/11/
I'm not sure what you're trying to achieve using margin-top.
Both elements need to be floated, and the second one should have clear:both set.
Example
Just add this
#one {
height: 200px;
width: 200px;
background-color: red;
float:left;
}
Here is the updated version on jsfiddle.net.
This is because your inline CSS "test" . For Span Id="bbb", there are two CSS define one is "test" and other is "two". Priority of "test" is more so float is not working .
I'm assuming you want one and two both in the footer. So you have to apply
float: left;
to one as well. About the margins: I can only see margins applied to the text with yellow background. These are <span>s, so inline elements. Make these block level elements, like <p>, for the margin to have effect.
I have this code :
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
margin-top: 20px;
}
<div class="myDiv">
<a class="myLink" href="javascript:void(0)">Ciao</a>
</div>
if I increase the margin-top I'd aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div...). It doesnt listen the container!
Why? And how can I fix this trouble?
EDIT
in fact what Id like to do is align an input box and a image, you can see the example here :
<div>
<input type="text" />
<a style="margin-top:10px; margin-left:5px;" href="#">
<img alt="Cerca" src="/private_images/home_button_right.png">
</a>
</div>
Change to:
.myLink
{
background-color: red;
padding-top: 100px;
display: inline-block;
}
or
div {
padding-top: 100px;
}
depending on what you want to achieve.
Based on your update of the question:
Updated Demo fiddle.
CSS:
input,
img {
vertical-align: middle;
}
Or use vertical-align: top; to align the tops.
Do the opposite thing:
.myDiv
{
background-color: blue;
padding-bottom: 20px;
}
.myLink
{
background-color: red;
}
Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.
You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
display:list-item;
}
You can use display:list-item; to solve this problem
Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.
You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/
I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/
Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}