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/
Related
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;
}
Please help to achieve this with CSS:
I have array of text strings, from 1 char to 200 chars.
I need to display them in webpage each in separate box.
the box flow is similar to text, left to right until the end of page then wrap
the background color of each box must be cyan.
minimal width and height must both be 50 pixels
1-2 pixel space between boxes (maybe achieve with margin=1)
there must always be at least two pixels between text and the edge of the box
text is vertically aligned to middle
text is horizontally aligned to center
maximum width of box must be 300 px
if text does not fit in 50x300 it is cropped inside the box (box will not grow)
each box should have 1 pixel black border
this must be simple for someone experienced! I already try almost every possible CSS tag; but always something is wrong. I read about CSS boxing, but surprisingly it just made it more compilcated.
<style>
z {
min-width: 50;
#min-height: 50;
padding: 1px;
padding-color: magenta;
margin: 1px;
margin-color: red;
#padding-left: 10px;
display: table-cell;
#height: 50;
#vertical-align: middle;
#text-align:center;
background-color: cyan;
#border: 1px;
#border-color:green;
/* padding:10px 10px 10px 10px; */
border-top:1px solid
border-style:solid;
border-color:#ff0000 #0000ff;
outline-style:dotted;
outline-color:#00ff00;
outline-width: 1px;
color: blue;
}
</style>
<html>
<z>1</z>
<z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>
I am pasting this so just you can see how hard and wrong I try.
Ok.
Don't use made up/invalid HTML elements or invalid CSS comments. Just because "it doesn't seem it matters", doesn't mean it won't make problems. When your HTML/CSS is invalid it's impossible to tell if that's the problem or not and you'll only get answers that tell you to correct them.
CSS requires units on lengths. min-width: 50; is invalid and if it's working for you, that just means you aren't writing corrent HTML/CSS and the document is in Quirks mode, meaning the browser emulates old IE errors, which makes debugging just more difficult.
There is no such properties as padding-color or margin-color. Don't make up things. Use a CSS and a validator to check your code. (http://validator.w3.org and http://jigsaw.w3.org/css-validator/).
Using display: table-cell; will just place all elements in one "table row" with no wrapping.
<p><span><span>1</span></span></p>
<p><span><span>abcdefghijklmnope</span></span></p>
<p><span><span>2</span></span></p>
<p><span><span>blablablabla</span></span></p>
p {
min-width: 50px;
max-width: 300px;
height: 50px;
padding: 2px;
margin: 1px;
float: left;
background-color: cyan;
border: 1 px solid blue;
color: blue;
overflow: hidden;
}
p > span {
display: table;
height: 100%;
width: 100%;
}
p > span > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
See http://jsfiddle.net/DyzAD/1/
(Refined answer)
It's not display:block that is wanted if height/width is required, as the OP also wants the elements to appear next to each other, then break, so float:left; is required rather than display block;
I have implemented the usage of text-overflow:ellipses; to aid in "breaking" the text so the elements will always have a visual balance and vertical alignment. Maybe you could provide a tooltip or html abbr attribute to display the whole text?
float:left on 'z' on any element will (should) fix your problem.
span {
min-width: 50px;
max-width:200px;
height: 24px;
margin: 1px;
float:left;
text-overflow:ellipsis;
overflow:hidden;
vertical-align: middle;
text-align:center;
background-color: cyan;
border: 1px solid green;
padding:10px;
color: blue;
white-space:no-wrap;
}
http://jsfiddle.net/MzKCh/3/
I am not sure if I understand your requirements properly but mixture of float:left elements with display:table-cell will give you text that wraps when it gets to the end of the page but allows both vertical and horizontal center aligning
html:
<div><span>test</span></div>
<div><span>test 1</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length</span></div>
<div><span>loads of text that wraps if the text goes over 300px in length and will hide extra content if really really long</span></div>
<div><span>a</span></div>
<div><span>Amassivewordwithnospacesthatwillalsowrapifithits300px</span></div>
css:
div
{
border:1px solid #000000;
background-color:cyan;
float:left;
margin:1px 1px 0 0;
box-sizing:border-box;
height:50px;
max-width:300px;
overflow:hidden;
}
div > span
{
display:table-cell;
min-width:50px;
max-width:300px;
height:50px;
padding:2px;
text-align:center;
word-wrap:break-word;
box-sizing:border-box;
vertical-align:middle;
}
http://jsfiddle.net/up6KC/6/
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
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/