I want to center an image and its title inside a div with this css code
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
By the look of this fiddle http://jsfiddle.net/7kx4r/ i can tell that nor the icon or the text is centered.How do i fix this?.
Remove unnecessary CSS and use the following CSS:
.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
margin-right:2%;
display:inline;
}
DEMO
You need to make .title class display: table-cell;
.title{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}
Fiddle
Note: Table-cell doesn't work in Old IE browsers
use text-align with your div having class title as
text-align: center;
check this fiddle http://jsfiddle.net/7kx4r/4/
something like this?
http://jsfiddle.net/7kx4r/8/
just add width:XXXpx; margin:0 auto;
Try it with this CSS:
.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
position:relative;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.titleIkon{
position:absolute;
top:50%;
margin-top: -8px;
}
What's going on here:
position:relative creates a new offset context for .box's children.
position:absolute tells .titleIkon to use offset parameters (left, right, top, bottom) relative to .box
top:50% tells .titleIkon that it should consider it's top edge position to be 50% of the height of the parent.
margin-top: -8px tells the browser to move the image up by half it's height (16px / 2 = 8px)
just define display:table-cell; vertical-align:middle; to your .title class.
its work IE8 to IE 10
see the dmeo - http://jsfiddle.net/7kx4r/10/
Hope you want this.
give text-align: center if you want only the pink line to be in center.http://jsfiddle.net/7kx4r/17/
Related
I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes.
HTML:
<div>
<a></a><a></a>
<span>Some text</span>
</div>
CSS:
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div {
background:yellow;
vertical-align:middle;
}
span {
background:red;
}
RESULT:
FIDDLE
vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:
div > * {
vertical-align:middle; // Align children to middle of line
}
See: http://jsfiddle.net/dfmx123/TFPx8/1186/
NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.
Give vertical-align:top; in a & span. Like this:
a, span{
vertical-align:top;
}
Check this http://jsfiddle.net/TFPx8/10/
Simply floating both elements left achieves the same result.
div {
background:yellow;
vertical-align:middle;
margin:10px;
}
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
span {
background:red;
display:inline-block;
float:left;
}
For fine tuning the position of an inline-block item, use top and left:
position: relative;
top: 5px;
left: 5px;
Thanks CSS-Tricks!
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I am trying to make some text appear centered in an element, but I can't seem to get it vertically aligned.
I have created a jsfiddle: http://jsfiddle.net/bz8Gn/ The arrow needs to be moved more up.
I have tried vertical-align:middle (and top)
.cont {
width:25px;
cursor:pointer;
border:solid 1px gray;
height:12px;
border-radius:10px;
text-align:center;
}
.arrow {
font-size:18px;
}
<div class = "cont">
<span class = "arrow">⇒</span>
</div>
Try this one
.arrow {
display: block;
font-size: 18px;
line-height: 10px;
}
If you want to set the text vertically centered, you have to set the line-height in CSS. This only works on this situation.
I tried setting the line-height of the arrow to the same as the height of the .cont but the result was not... really aligned, so I have to reduce by 2 pixels to make it appear as aligned.
Demo: http://jsfiddle.net/jlratwil/49cjg/
have a look here: http://jsfiddle.net/bz8Gn/5/
use position relative to move the object 5px up
CODE
.cont {
width:25px;
cursor:pointer;
border:solid 1px gray;
height:12px;
border-radius:10px;
text-align:center;
position: relative;
}
.arrow {
font-size:18px;
position: relative;
top: -5px;
}
Your updated Fiddle
You can combine vertical-align with line-height
.arrow {
vertical-align: top;
font-size:18px;
line-height: 12px;
}
the vertical-align property will cause the targeted element to align itself in relation to other inline elements.
To other inline elements (except when applied to table cells, where it's applied to the content). Taken from this article (recommended to read): Understanding CSS’s vertical-align Property.
Now, to solve it. You have different ways to do this:
Set the line-height of the container box equal to its height:
.cont{
width:25px;
cursor:pointer;
border:solid 1px gray;
height:12px;
line-height: 12px;
border-radius:10px;
text-align:center;
}
.arrow{font-size:18px;}
Set the div to display: table-cell and give the arrow a vertical-align: middle:
.cont{
width:25px;
cursor:pointer;
border:solid 1px gray;
height:12px;
display: table-cell;
border-radius:10px;
text-align:center;
/* vertical align applied to the contents */
vertical-align: middle;
}
.arrow{
font-size:18px;
}
Use absolute positioning or margins to reposition the arrow.
By the way, beware that the second one doesn't work on IE7 and below (see display :table-cell does not work in ie 7?).
vertical-align only works with block elements. I set the height for you to illustrate how it works.
Updated your fiddle http://jsfiddle.net/bz8Gn/1/
My outer div is position:relative and inner div is positioned absolute.
I want to set my inner div center align vertically and thinking to use top:auto and bottom:auto but it is not working. Please advice me how it can be done.
div.Container div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
height:95px !important;
position:relative !important;
}
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:auto;
bottom:auto;
right:0px;
}
<div class="Right">
<div class="header-search">
<input type="text" class="searchbox" />
<input type="button" class="searchbutton" value="›" />
</div>
</div>
You can use line-height:95px; in the outer div and vertical-align: middle; in the inner div like this:
div.Right
{
width:50%;
float:right ;
border: 01px dashed green;
line-height:95px !important;
display: block;
}
div.header-search
{
overflow:auto;
border:0px dashed blue;
vertical-align: middle;
}
You can play with it here: http://jsfiddle.net/leniel/5Mm67/
If you want to horizontal align the content of the inner div, just add this in div.Right:
text-align: center;
Here's the result: http://jsfiddle.net/leniel/5Mm67/1/
the best way to achieve what you are after would be to remove the bottom:auto; style and replace the top:auto; with top:50%; . After that work out the height of the search bar that you are trying to center (say its 20px) and add a negative margin styles for half of its height, so if it was 20px the style would be margin-top:-10px;
your css would look like this:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height:20px;
margin-top:-10px;
right:0;
}
set .header-search to top:50% or bottom:50% then use margin-top:-(half of div height) or margin-bottom:-(half of div height); respectively. I also sometimes just simply use top:50% or bottom: 50% without the negative margins.
For example:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
height: 500px;
margin-top:-250px;
right:0px;
}
So yeah, in this case you would have to set a fixed height.
Set in the div with position absolute: "top:50%;"
It will display the div a litle bit to low (top od the absolute div should be exacly on the 50% of parent height - relative div) but there are ways to go around this.
For example:
Do even one more div with position relative and move it higher with half of absolute div height (this doesnt look very nice in code) - You must know the divs height, if you dont you can measure the size in sth like jQuery and move div a litle higher.
Easiest way: Maybe try 45% instead of 50% (if its not pixel to pixel design).
Propably somebody has better solutions, if so I would like to see them to :)
This should work:
div.header-search
{
overflow:auto;
display:inline;
border:0px dashed blue;
position:absolute;
top:50%;
right:0px;
}
Hie, there are several methods to vertical centering of div its done through the magic of CSS.... Here is the examples and it works fine i have tested... and it works fine.
HTML:
<div id="parent">
<div id="child">Content here</div>
</div>
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Here is other methods click here to see complete reference
Hope, it will helps you. Cheers. !!
Try setting the inner div to margin: auto 0;
I've a div with only a min-width that extends itself like it is 100% width.
Inside it i have a link left floated and I'm going crazy finding a way to center it inside the div.
How can i do this without changin it's float?
Oh and the link hasn't a defined with
EDIT:
I've tried with:
I gave the container a text-align: center,
removed the float nad it gets centerd but not aligned with others element and i've tried using display: inline and vertical-align.
For the code i'm trying to center the "Project name" here http://twitter.github.com/bootstrap/examples/fluid.html
Hope this helps:
http://jsfiddle.net/cU2ff/
EDIT
http://jsfiddle.net/cU2ff/1/
I came up with this, don't know if it's gonna help. The float: left property doesn't do anything but I left it there
<div id='container'>
<a id='projectName' href='#'>Ciaoasdsa da sda sd asd adsa</a>
<ul id='menu'><li>li1</li><li>li2</li></ul>
<p id='login'><a>asd</a></p>
</div>
#container
{
width:100%;
position:relative;
overflow:hidden;
border: 1px solid black;
}
li { float: left; }
#menu, #login { border: 1px solid black; }
#menu{ float:left; }
#login { float:right; }
#projectName
{
text-align: center;
border:1px solid red;
padding:3px;
width: 100%;
position: absolute;
float: left;
}
EDIT
http://jsfiddle.net/cU2ff/2/
wrap it with a div and give it the id projectName
I usually used this too center my links within the div.
div.name a
{
margin-left:auto;
margin-right:auto;
}
Without being able to see the html you are talking about it is a little difficult to give you an answer, but try this if it is just text inside the link.
a{
display:block;
text-align:center;
width:100%;
}
Try to use this
a{
margin:0 auto;
}