I am trying to center this text character ☢ within a circle. (☢)
While IE 10 displays the text vertically and horizontally centered, both Chrome and Firefox render too much padding at the top.
Any ideas how to fix this? (Flexbox is not a must have)
HTML
<div class="tl-icon">
<div>☢</div>
</div>
CSS
.tl-icon {
align-items: center;
background: black;
border-radius: 50%;
color: yellow;
display: flex;
font-size: 3em;
height: 3rem;
justify-content: center;
width: 3rem;
}
See live demo here: http://codepen.io/dash/pen/ZYePWP
The problem is that the inner child is a text which screws with your height.
I added a line-height which seems to fix it a bit:
.tl-icon div{
line-height:1px;
}
http://codepen.io/anon/pen/ZYePBZ
Target that child div, set it to inline-block and change the vertical alignment:
.tl-icon div{
display: inline-block;
vertical-align: top;
}
CODEPEN
I had to fart about with the dimensions a bit, but this should center vertically and horizontally, so far tested in Chrome, FF and Safari.
http://codepen.io/anon/pen/gbmEWX
Set the parent to
display:table;
Child to
display:table-cell;
vertical-align:middle;
text-align:center;
You've done everything correctly with your flexbox CSS.
The issue appears to be with line-height. You're using an html entity as text and it looks like .tl-icon is inheriting a value for line-height that doesn't work well.
Try adjusting your line-height, and using a unitless value for it. This way the line-height will compute to whatever the font size is for the interior element.
.tl-icon {
line-height:.9;
}
Related
No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
I know how to align text vertically inside a div, but I am unsure on how to do it if the div has a percentage height and width. Here is my code:
<div id="header">
<h1>Home</h1>
</div>
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
}
Now on my webpage the text in the div has been aligned correctly horizontally but not vertically. How do I fix this problem? Can you also try to explain your answers and keep them as simple as possible please (I'm still relatively new at HTML/CSS). Thank you.
You can use the flexbox model to easily center things.
Just add the following rules to your container:
display:flex;
justify-content: center; //horizontal centering
align-items:center; //vertical centering
FIDDLE
Note this is probably a more general solution than what you expected, but what's really cool about flexbox is that it works in many different cases, including yours (example with an h1 tag here).
Try giving display:inline-block to your h1 tag.
DEMO
You can just add:
display:inline-block
to your h1
example: http://jsfiddle.net/24pwprvf/
Add line-height matching the height of the container:
#header {
background-color: red;
color: white;
text-align: center;
vertical-align: middle;
width: 100%;
height: 15%;
line-height: 0.15em;
}
You should not use line-height for the effect you desire as suggested by Praveen Above.
You can get the same affect by either putting, 'display: inline-block' in either the #header div or in the #header h1 css style.
the first part is not advisable.Best practice will be to use it in the h1 style only.
I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.
I am trying to centre an anchor element within a div element both horizontally and vertically. The basis for this question is as follow.
<div></div>
<div></div>
<div>
Hello
</div>
<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background-color: teal;
box-sizing: border-box;
margin: 10px;
float: left;
text-align: center;
display: table-cell;
vertical-align: middle;
}
a {
color: white;
text-decoration: none;
font-style: 14px;
}
Now, I know that I can use text-align: center; on the containing div to centre the anchor element horizontally and that I can use display: table-cell; vertical-align: middle; on the div to align it vertically but it doesn't seem to work together, especially when the div is set to float left.
How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.
I would prefer not to use line-height since it breaks with multi-line text.
http://jsfiddle.net/xHLze/2/
You basically listed the answer in your question, though you may just need to apply the styles to a few different places:
I put display: table; on the containing <div>, allowing me to set display: table-cell; on the <a> element, after which I can apply vertical-align: middle; to vertically center the text.
I then applied text-align: center; to the <a> element to horizontally center it.
http://jsfiddle.net/3RfgD/
What I believe you missed is that you should be setting display: table; on the table-cell elements parent in order for it to work properly. (an element cannot act as the cell of a table if it is not in a table, whether it's an actual table or a CSS one)
Use margin for your anchor tag to auto align it in the center of your div tag like this:
a{margin:0 auto;}
This automatically centralizes your text both vertically and horizontally. :) but since anchor tag is inline tag we need to specify it with respect to the div tag like this
div a {display:block;
width:50px;}
where 50px is with respect to div's width. Check out here why margin 0 auto doesn't work
Consider the following example: (live demo here)
HTML:
<div id="outer_wrapper">
<div class="wrapper">
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
</div>
<div class="wrapper">
<a><img src="http://assets.test.myyearbook.com/pimp_images/home_page/icon_smiley.gif" /></a>
</div>
<div class="wrapper">
<a><img src="http://thumbs3.ebaystatic.com/m/mvHqVR-GDRQ2AzadtgupdgQ/80.jpg" /></a>
</div>
<div class="wrapper">
<a><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/718smiley.png/60px-718smiley.png" /></a>
</div>
</div>
CSS:
#outer_wrapper {
background-color: #bbb;
width: 350px;
}
.wrapper {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 100px;
text-align: center;
margin-right: 20px;
}
a {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
}
The output is:
Why the black wrappers are not vertically aligned ? How could I fix that ?
The images are horizontally centered in the red boxes. How could I vertically center them ?
Please do not change the HTML, if possible.
Observe that it is the base of the images which are aligned. This is to do with the vertical-align; if you use a value for vertical-align on .wrapper other than baseline, like top, middle or bottom, it will fix it. (The difference between these will only be apparent if you put some text inside the div as well.)
Then you want to centre the images in their 80x80 spots. You can do that with display: table-cell and vertical-align: middle on the a (and add line-height: 0 to fix a couple more issue). You can then play further with mixing these groups of styles in the a tag, the .wrapper, or even throwing away the .wrapper if it isn't necessary (it would only be needed - if it is at all - if you're putting text in with it).
Result, with no further tweaks than what I've mentioned here: http://jsfiddle.net/jESsA/38/.
This will work on all decent browsers, and even on IE8/9, but it won't work on IE6/7. A technique for solving this which should work in IE6/7 is this: on the a, set display to block and alter the line-height from 0 to 78px (I'm not entirely clear on why 80px makes it shift down one pixel, but it does; if I thought about it long enough I could probably figure out why), and shift the vertical-align: middle to the img child. Final result: http://jsfiddle.net/jESsA/44/
You can try assigning a vertical-align attribute on the img tag. Vertical align is relative to the line box which means you need to set the line box as tall as the height of the a tag. So these changes are needed in your CSS markup:
#outer_wrapper {
overflow: hidden; /* required when you float everything inside it */
}
.wrapper {
/* display: inline-block is not required */
/* text-align: center is not required -- see below */
float: left; /* float all wrappers left */
}
a {
display: block; /* block display required to make width and height behave as expected */
margin-left: 4px; /* shift the block to make it horizontally centered */
margin-top: 9px; /* shift the block to make it vertically centered */
text-align: center; /* center inline content horizontally */
line-height: 80px; /* line height must be set for next item to work */
}
img {
vertical-align: middle; /* presto */
}
Demo here.
Take a look at this:
http://jsfiddle.net/jESsA/37/
Basically you use float: left to put your boxes inline and a background image instead of an img tag. Because you are using float, you need to clear after to cancel the float effect on other elements.
I changed the DIV tags to A tags so you can have a link on the hole block and keep it simple. But you can keep it as a DIV tag and put an A block inside though (or use JavaScript)
.wrapper {
float: left;
}
http://jsfiddle.net/jESsA/3/
You could check this out: http://www.brunildo.org/test/img_center.html
may be this will help you
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html
it helped me :)
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 2 years ago.
I have a img in floated div and I don't know how to center it vertically.
<div style="height: 300px">
<img style="height: 50px" src="something" />
</div>
vertical-align: middle of course doesn't work.
http://jsfiddle.net/wKQYj/
To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:
div {
height: 300px;
line-height: 300px;
}
JS Fiddle demo.
The vertical-align CSS style specifies the alignment of text within its text row. This allows you to specify text as superscript or subscript, for example.
So it isn't actually intended to vertically align an element within a box.
There is an explicit exception to this, however -- table cells (ie <td> and <th> elements) use the vertical-align style to do exactly that: align the contents of the cell within the cell.
This exception is something of a quirk - it really shouldn't exist. The CSS designers put it in there in order to allow CSS to reproduce the valign attribute of table elements, which was commonly used by designers in the dark-old days of table-based layouts.
For other elements, aligning the contents of a box vertically in the middle of the it can be a bit of a fine art. There are several techniques:
For single lines of text, simply make the line-height the same as the height of the entire box. You probably won't even need vertical-align for this.
Use display:table-cell; to make the element simulate a table cell, and then use vertical-align. This works, but may have unintended consequences (there are other attributes of table cells that you may not want to simulate).
If you know the height of the element you want to vertically align, you can position it to 50% minus half its height, like this:
position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
There are a few others, but these should get you started.
Hope that helps.
For a more modern (IE8+) solution that doesn't use tables, I like this one best.
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
Use the translate property, it's simple and works even in IE:
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
vertical-align property is only truly good on td elements. Try something like:
<table>
<tr>
<td style='height:300px; vertical-align:center'>
<img src='something'>
</td>
</tr>
</table>
OR since you know the height and width of the img:
<div style='height:300px;'>
<img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>
Pretty cool and modern approach (with height specified):
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I'm using the display:box property:
#container {
display: box;
box-orient: vertical;
box-pack: center;
}
#text {
vertical-align: middle;
}
See the js-fiddle here: verical align js-fiddle
Javascript would probably be the best best to get the image centered in the vertical center for every case. if you can use a library like jQuery it's just a few lines of code.
$(function(){
var containerHeight = $('#container').outerHeight();
var imgHeight = $('#logo img').outerHeight();
var difference = (containerHeight - imgHeight)/2;
$('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});
});
I'm using flex for centering an element. It is effective at making the page more responsive.
div {
display: flex;
align-items: center;
}
Please have a look here to learn how to center vertically.