This is my fiddle: http://jsfiddle.net/7UwD2/
I've tried everything I found on the internet - setting:
margin: 0px auto; with width, but it doesn't work.
Only if I'll add an attribute: text-align: center; to the head-title class it does center - but only the text, image is still on the left position.
Where is my problem?
Remove the float from the image,
use text-align: center on the outer DIV,
use a SPAN instead of the inner DIV,
apply vertical-align: middle to the image and SPAN
HTML:
<div class="head-title">
<img class="list-icon" src="...">
<span>Menu</span>
</div>
CSS:
.head-title {
width: 150px;
height: 26px;
padding: 5px;
text-align: center;
}
.head-title > * {
vertical-align: middle;
}
.list-icon {
width: 24px;
height: 24px;
}
Live demo: http://jsfiddle.net/7UwD2/6/
Related
How could I vertically center a child within a parent ?
And, the width and height of child and parent is fixed, but unknown.
How could I realize it?
<div class="parent">
<div class="child"></div>
</div>
My prefered technique for centering a box both vertically and horizontally requires two containers.
The outher container
should have display: table;
The inner container
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box
should have display: inline-block;
should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered
The elegance of this technique, is that you can add your content to the content box without worrying about its height or width!
Just add your content to the content box.
Demo
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<p>You can put anything here</p>
<p>Yes, really anything!</p>
</div>
</div>
</div>
See also this Fiddle!
in css vertical-align:middle is used to align a child vertically centre. But this property is applied to only those elements which havedisplay:inline-block or display:table-cell. So accordingly try to apply display property and you will get vertically centre position of your elements.
You can center things through:
margin: 0 auto;
Try this code
body {
margin: 0;
padding:0;
}
.div1 {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.div2 {
width: 50vw;
height: 50vh;
background: #999;
}
Will be hard to explain what I want, so I will show an animated gif of the result that I want (made in photoshop) and my code in jsFiddle of what's happening.
As you can see, when the blue box size is not enough to fit all items in one row, the 4ยบ item is moved to the second row (as expected), but instead of being aligned in center, he is left aligned.
My CSS code
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: center;
padding: 10px;
}
.outer-box a
{
display: inline-block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
}
.outer-box a:hover
{
background: #990000;
}
.outer-box a div
{
background: #99ccff;
width: 100%;
height: 100%;
}
My HTML
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
My Result
My Expected Result
I've tried to play with float divs (one div inside outer-box and the link elements using float left) with no success.
There is a way to accomplish this without javascript?
Here is my code in jsFiddle.
PS. English is not my native language '-'.
with flex or inline block, you can use a pseudo of 1px height and the width of 2 boxes + their margins .
It will be like a fith box, filling entirely the second line and drop as a third line:
.outer-box {
background: #00cc99;
width: 100%;
max-width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
font-size: 0;
padding: 10px;
}
.outer-box:after {
content: '';
max-height: 1px;
width: 320px
}
.outer-box a {
display: block;
width: 120px;
height: 80px;
padding: 10px;
background: #ff5050;
font-size: 12px;
margin: 5px 10px;
}
.outer-box a:hover {
background: #990000;
}
.outer-box a div {
background: #99ccff;
height: 100%;
}
<h1> USE full page mode then resize window broser </h1>
<div class="outer-box">
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
<div>I put image and text here</div>
</div>
Inline-block version to play with
Firstly, I love the way you presented your problem. Nice images :-)
I don't think you can do what you want without an extra element. Adding an inline-block element that re-adjusts the alignment will do what you want.
.inner-box {
text-align: left;
display: inline-block;
}
See https://jsfiddle.net/qgcz0ax4/
Each of those divs act as text due to the <a> tags. Just set text-align to left for .outer-box - if you want each of the divs to have center aligned text, create a class and give that class to all 4 child divs
.outer-box
{
background: #00cc99;
width: 100%;
max-width: 800px;
font-size: 0;
text-align: left;
padding: 10px;
}
JSFiddle link
HTML:
<div id="va-m">
<img src="http://placehold.it/150x150">
<h1> vertical-align: middle </h1>
</div>
<div id="no-va">
<img src="http://placehold.it/150x150">
<h1> no vertical align </h1>
</div>
CSS:
div {
margin-top: 30px;
padding: 5px;
width: 500px;
height: 150px;
line-height: 200px;
background-color: blue;
}
#va-m img {
vertical-align: middle;
}
h1 {
display: inline;
}
img {
border-radius: 75px;
}
I'm trying to align the image and text vertically in the container div. However, I seem to either get the choice of aligning the image, or aligning the text. Using vertical-align: middle on the img tag pushes it out of the container. Why?
Change the height to auto
Fiddle
div {
margin-top: 30px;
padding: 5px;
width: 500px;
//height: 150px;
height: auto;
line-height: 200px;
background-color: blue;
}
Update: Use table and table-cell + vertical-align: middle
Fiddle
I'm working on a chat module for a project, everything is working but the css. I have a global container for the chat elements, this div has fixed position. Inside I have two divs, one for the chat windows and one for the contacts list, both the chat window and the contact list are floating to the right and can be "minimized" by clicking on the title (this hides the body and only leaves the title visible). The problem is if I minimize just one of the divs it remains on the top at the same height as the other div (see the image).
This is what I'm getting:
This is what I want:
Relevant code:
<body>
<!--boring code-->
<div class="chat_container">
<div class="contactos show">
<div class="titulo">contactos</div>
<div class="container">
<div class="contacto online" id="contacto_3">juan an orozco</div>
</div>
</div>
<div class="chat_wdow_container">
<div class="chat_wdow " id="chat_wdow_3">
<div class="title_area">juan an orozco</div>
<div class="container">
<div class="msg_area"></div>
<input type="text" name="msg">
</div>
</div>
</div>
</div>
</body>
and css
div.chat_container
{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed gold;
}
div.chat_container > div
{
float: right;
}
div.chat_container div.contactos div.titulo
{
text-align: center;
}
div.chat_container div.contactos
{
min-width: 150px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
}
div.chat_container div.contactos div.container
{
display: none;
min-height: 145px;
padding: 10px;
}
div.chat_container div.contactos.show div.container
{
display: block;
}
div.chat_container div.chat_wdow
{
margin: 0 5px;
min-width: 190px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
float: left;
}
div.chat_container div.chat_wdow div.title_area
{
text-align: center;
}
div.chat_container div.chat_wdow div.container div.msg_area
{
background-color: white;
height: 120px;
padding: 10px;
}
div.chat_container div.chat_wdow div.container
{
display: none;
}
div.chat_container div.chat_wdow.show div.container
{
display: block;
}
.chat_wdow input[type="text"]
{
width: 186px;
}
To collapse the window I toggle via mootools the class .show. When this class is missing the container area of the windows has display:none and when it gets applied it has display:block.
What I have tried so far:
setting the fixed parent to a height of 0 and overflow visible
seting the inner container to position relative and the child to absolute
using clear and overflow hacks
changing margins to auto values
changing vertical sizes and minimun heights of the inner containers and childs
changing display to inline and inline block
changing chat container to absolute and inner containers to relative
I have been searching for a while on google and SO but I have only found the options that I have already tried, I also looked at facebook's chat css but I can't find anything to help me, so I am looking for new ideas to bring down the collapsed div.
One solution is to use display:inline-block or display:inline instead and then set the vertical-align:bottom.
Ex: http://jsbin.com/uhubeh/1/edit
If you know the widths of both, however, you could also just use absolute positioning.
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle