So classical css problem, vertical aligning, but this time a bit more complicated, please take a look at this fiddle: http://jsfiddle.net/uH4Rn/2/
It is pretty obvious that i want image to be aligned exactly at the middle and as you can see it doesn't work i think problem is with these two lines:
top:-25%;
margin-top:-100px;
By the way i don't care about IE that much below 9 version and i would like to avoid javascript or jquery.
Since the previous answer didnt seem to give you the right result, here is another that definatly works. Unless i totally dont understand your question.
This solution will center any image in the given container:
.container{
width: 300px;
border: 1px solid black;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/uH4Rn/2/
Related
I have a problem with images in horizontal scrolling, namely I don´t see the images correctly, my code is following jsfiddle.net/y8gy6oar/.
I can´t unterstand how to fix it, I hope someone can help me.
Set the width for your article tags to the size of the images.
Of course, this only works if you know the size of your images ahead of time, and they are all the same size.
div.horizontal .table article {
width: 569px;
height: 320px;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}
What is happening in your CSS is the articles are set at 200px so the images are cut off.
I want to center within a square div an arbitrary character. I admit that this sounds like a very simple task, but nothing I've tried works (and I've tried a bazillion things!)1.
For concreteness, let's say that the div has height and width equal to 20ex, and let's say that the single character is the so-called "multiplication sign": ✕, nice and symmetric. I want this character to be positioned inside the 20ex-by-20ex square div such that the point where the two strokes cross is dead-center, both vertically and horizontally, within the div.
EDIT:
I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.
1I have learned that no matter how mind-numbingly straightforward a layout task may appear, it can still take me hours and hours and hours to figure out the CSS to achieve it.
Setting the line-height to the height of the container should do it.
text-align: center;
line-height:20px;
width:20px;
height:20px;
Example here: http://codepen.io/Jedidiah/pen/rLfHz
Use display:table-cell and vertical-align:middle and text-align:center. Like this in your CSS:
#center{
width:100px;height:100px;
display:table-cell;
text-align:center;
vertical-align:middle;
}
The display:table-cell is required to be able to use vertical-align to center content in the on the div ( don't ask me why someone decided to make it like that :) ).
See this JSFiddle.
It is just impossible using css only to center a single character vertically and horizontally in a div because it depends of the font the browser will use to render the character.
For those who just want to center a "X", it is safer to make the "X" transparent, create :before and :after pseudo-elements, give them a thin width and a background that has the same color as the initial "X", then rotate them of + or - 45deg.
HTML code:
<div>X</div>
CSS code:
* {
box-sizing: border-box;
}
div {
font-size: 2em;
position: relative;
border: 1px solid black;
width: 2em;
height: 2em;
color: transparent;
}
div:before,
div:after {
content: "X";
display: block;
z-index: 1;
position: absolute;
top: 0.25em;
bottom: 0.25em;
left: 0.9em;
right: 0.9em;
background-color: black;
}
div:before {
transform: rotate(45deg);
}
div:after {
transform: rotate(-45deg);
}
Here is a jsfiddle: https://jsfiddle.net/z4pmu7r9/
this question is a bit old but it's the first answer when you search "center single letter in square css"
so in 2018 you can simply do
#center {
width: 0;
height: 0
display: flex;
justify-content: center;
align-items: center;
}
justify-content: center align horizontally
align-items: center align vertically
Note that it will works regardless of the shape of the div, could be a rectangle.
This question is a bit old, but after noticing OP's edit:
I tried the answers I've received so far, here. The solutions given by Jedidiah and by Ashok Kumar Gupta (second and third divs) produce pretty similar results, but (maybe I'm seeing things), the ✕ in the third div is just a hair above the vertical center.
I wanted to post that if you used × instead of ✕, the centering looks much better.
https://codepen.io/persianturtle/pen/zPKbRj
Answer to your question:
<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>
Note: background: red; is only for visualization.
:)
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
I have a square div of fixed size and wish to place an arbitrary size image inside so that it is centred both horizontally and vertically, using CSS. Horizontally is easy:
.container { text-align: center }
For the vertical, the common solution is:
.container {
height: 50px;
line-height: 50px;
}
img {
vertical-align: middle;
}
But this is not perfect, depending on the font size, the image will be around 2-4px too far down.
To my understanding, this is because the "middle" used for vertical-align is not really the middle, but a particular position on the font that is close to the middle. A (slightly hacky) workaround would be:
container {
font-size: 0;
}
and this works in Chrome and IE7, but not IE8. We are hoping to make all font lines the same point, in the middle, but it seems to be hit-and-miss depending on the browser and, probably, the font used.
The only solution I can think of is to hack the line-height, making it slightly shorter, to make the image appear in the right location, but it seems extremely fragile. Is there a better solution?
See a demo of all three solutions here:
http://jsfiddle.net/usvrj/3/
Those without IE8 may find this screenshot useful:
If css3 is an option, then flexbox does a good job at vertical and horizontal aligning:
UPDATED FIDDLE
.container {
display:flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */
}
How about using your image as a background? This way you could center it consistently everywhere. Something along these lines:
margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
This is REALLY hacky, but it is what we used to do in the ie6 days.
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px; // half of whatever the image's height is, assuming 24px
margin-left: -12px; // half of whatever the image's width is, assuming 24px
}
I may be missing something in this example, but you get the idea.
Have you tried the following:
img {
display: block;
line-height: 0;
}
I usually use this hack, but I haven't really checked it that thoroughly in IE8.
Here is a small JS Fiddle I have made: http://jsfiddle.net/rachit5/Ge4YH/
I believe it matches your requirement.
HTML:
<div>
<img src=""/>
</div>
CSS:
div{height:400px;width:400px;position:relative;border:1px solid #000;}
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;}
Live demo: http://jsfiddle.net/9Y7Cm/1/
I want the text to be placed at the 50% of the image height - so just in the middle of the box.
I was searching a lot on SO and google - there are a lot of questions like this, but each other is about another problem... I was tried the solutions given by people but none of them worked so thats why I'm asking you here for any solution!
Just set vertical-align: middle on the img.
http://jsfiddle.net/9Y7Cm/2/
replace the following with these:
#column-content {
display: table-cell;
border: 1px solid red;
padding: 10px;
}
img{
vertical-align:middle;
}
it's the image you want to center.