I know this question has been asked a million times and I've already used all those solutions in other websites I created and they worked just fine.
However, in my latest situation, the usual answers are not working for me.
This is the class that needs to have other elements centered inside it (ie. lists, tables):
.container {
position: relative;
width: 80%;
height: 90%;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
}
I added the position: relative because I put another child <div> inside .container which had its position set to absolute. I actually managed to center things, but that's not the kind of center I need. When I added a table-like div structure inside .container it went straight back to the left - no idea why.
I would appreciate some help.
JSFiddle: http://jsfiddle.net/J3jm7/3/
Centering an inline element
To center an inline element just use text-align:center on the container.
.container {
text-align:center
}
Demo
Centering a block-level element
Use margin:auto to center a block-level element such as a table within its container.
.container table {
margin:auto;
}
Demo
Centering a list
Lists are a bit of a special case because of li { display: list-item; }. To center a <ul> you will need to change it to an inline-block element and center it on the container.
.container {
text-align:center
}
.container ul {
padding:0;
display:inline-block;
}
Demo
You have to set the left and right margins of the element inside of your container. Here's an example, slightly modifying your code so you can see the centering happening on the table element:
<head>
<style>
.container {
position: relative;
width: 100%;
height: 800px;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
border:1px solid black;
}
.container table {
width:25%;
height: 25%;
margin-left:auto;
margin-right:auto;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="container">
<table></table>
</div>
</body>
</html>
Related
The issue is to align the image at the center of the div. This is working properly in chrome, except for IE
<DIV id="content"><P>Internal resources </P>
<DIV class="containertop">
<P>External resources </P>
</DIV>
<DIV class="contentcontainer">
<DIV class="containerImg">
<img height="286" width="381" src="http://www.bestwestern.com/img/bg-groups-meetings.png" /alt="Banner Image" title="Banner Image"></img>
</DIV>
</DIV>
</DIV>
CSS:
.containerImg Img {
border: 0 none;
padding: 0px !important;
margin: 0px;
width: 368px;
height: 277px;
margin-left: auto;
margin-right: auto;
display: block;
}
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
#content .containertop {
padding-top: 15px;
color: #999;
}
div#content {
font: normal 12px/1.6em arial;
font-size: 12px;
color: #666;
width: 471px;
padding: 10px 10px 0 10px;
margin: 0;
background-color: #fff;
min-height: 100%;
height: 100%;
background-color: #fff !important;
min-height: 100% !important;
height: 100%;
}
I removed tag and tried above CSS and that is also not working.
Here is the fiddle : https://jsfiddle.net/nf5hghqy/10/ (Open in IE)
Can we resolve this?
<center> tag is deprecated (see here)
This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the
CSS text-align property, which can be applied to the element or
to an individual . For centering blocks, use other CSS properties
like margin-left and margin-right and set them to auto (or set margin
to 0 auto).
To get img aligned center you have to set it display:block ( because img is by default an inline element) and margin:auto
Another mistake, img is a self-closing tag, so you can't do this <img></img>
See snippet below:
div {
border: 1px solid red /*demo purposes */
}
img {
display: block;
margin: auto;
}
<div class="containerImg">
<img src="http://www.bestwestern.com/img/bg-groups-meetings.png" alt="Banner Image" title="Banner Image" />
</div>
UPDATE - Based on OP's new fiddle:
your issue is here:
#content .contentcontainer {
float:left;
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
simply remove float:left, like this:
#content .contentcontainer {
padding: 5px 10px 0 0;
margin: 1px 0 0 0px;
}
First check you have added doctype
center tag doesn't work in IE ,you can use CSS as text-align: center , and auto for margin , then it will work ok in IE. Fine more here
From http://www.w3.org/Style/Examples/007/center.en.html#block:
.containerImg img{
display:block;
margin-left:auto;
margin-right:auto;
}
The important part is to make sure the image is a block element; this way it has width. The margin-left and margin-right set to auto automatically set margins based on the width of the block element image, making the image center itself.
try this.
.containerImg img{
margin:auto;
display:block
}
You need to remove the tags and add some css either as separate file or in line and use margin:auto; instead of your margin-left and margin-right
I have a header: FIXED position.
Here is css:
#header{
position:fixed;
height: 6em;
display:block;
width: 100%;
background: rgba(255, 255, 255, 1);
z-index:9;
text-align:center;
color: #000000;
}
And inside, I want to center text middle and vertical middle.
Here is what I have so far, but it's not working. All example online shows with an absolute position as the container, but it's not working with the fixed one.
HTML:
<div id="header">
<div id="bandname">Bewolf Photography</div>
<div id="insta"><img src="imgs/insta.png" width="40" alt="tablets" /></div>
<div id="bandname">Bewolf Photography</div>
</div>
CSS for text and image:
#bandname
{
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
background: rgba(0, 255, 0, 1);
}
#insta {
display: inline-block;
padding: 0px 0px 0px 50px;
vertical-align: middle;
}
I just can't figure that one out...
I tried using
line-height: 6em;
Help would be appreciated.. .thanks
but that doesn't work either.
Use the pseudo element vertical centre trick.
#header:before brings the inline elements down to the centre. The direct children of header are given display: inline-block and vertical-align: middle to keep a straight line.
Read more about pseudo elements here.
This technique basically adds a "div" before the rest of your content. (It can be replaced with a real <div> if you really need this to work in IE7 and below. [Don't bother!] ). It basically looks like this:
<div class="header">
<!-- added by css -->
<div>I am :before and you will all do as I say! To the middle, plebs!</div>
<!-- end css content -->
<div>Yes master!</div>
<div>Anything you say sir!</div>
</div>
Working Example
Note: I removed the div from around the image. It seems unnecessary, but can be placed back in if needs must. Also, I have targeted only the direct children of #header using the direct children selector: >. Here is a huge list of CSS selectors.
#header {
position: fixed;
height: 6em;
display: block;
width: 100%;
background: rgb(0, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(0, 255, 255, 1);
z-index: 9;
text-align: center;
color: #000000;
top: 0px;
}
#header:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
#header > div,
#header > img {
display: inline-block;
font-size: 2.8em;
padding: 0px 0px 0 0;
vertical-align: middle;
}
<div id="header">
<div id="bandname">Test</div>
<img src="http://www.placehold.it/50" width="40" alt="tablets" />
<div id="bandname">test</div>
</div>
The easiest solution is to have the following css for it's content.
#header .wrapper
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Since there are multiple children, it's better to wrap them around a wrapper div. Here's the working example:
http://jsfiddle.net/zf987w0b/1/
You can use the properties left, right, top and bottom, set em to 50% for example, and them use the transform property to translate the element -50% of itself to perfectly center it. Sounds confuse but i made a fiddle: http://jsfiddle.net/zzztfkwu/ Will this work?
EDIT: http://jsfiddle.net/kbh97n82/1 updated fiddle with .wrapper solution.
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}
I have a few Links/images sitting side by side in a container.
The container has its overflow property set to overflow: hidden and the images are 'sunken' into the container using margin-top: -50px;.
When the user hovers over the link I want the image to slide down out of the container and when the user hovers out the image jumps back up.
Here is a demo of what I have currently.
Here is my css ( I will post it all in case there are problems somewhere else that is causing this)
html, body {
width:100%;
height: 100%;
margin:0;
padding:0;
}
#w {
display:table;
width: 100%;
height: 100%;
}
#iw {
display:table-cell;
text-align:center;
vertical-align:middle;
width: 100%;
}
#iiw {
border-top: 1px solid #000;
height: 125px;
overflow: hidden;
}
#iiw a {
margin-left: 8px;
margin-right: 8px;
}
#iiw a img {
margin-top: -50px;
height: 100px;
-moz-box-shadow:0 0.8em 1em #444;
-webkit-box-shadow:0 0.8em 1em #444;
-o-box-shadow:0 0.8em 1em #444;
box-shadow:0 0.8em 1em #444;
-moz-border-radius:0 0 10px 20px;
-webkit-border-radius:0 0 10px 20px;
-o-border-radius:0 0 10px 20px;
border-radius: 0 0 10px 20px;
}
and html HTML markup is
<div id="w">
<div id="iw">
<div id="iiw">
<a href="#">
<img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" />
</a>
<a href="#">
<img src="http://programmers.stackexchange.com/content/programmers/img/apple-touch-icon.png" />
</a>
</div>
</div>
</div>
I'm using JQuery right now to do the hover events (for ease of use), however the final product will have no JQuery (so don't comment on the JQuery code)
Edit I realize I left that code out.. oops.
very simple stuff. just using it to swap the margin-top property
$("a").hover(function() {
$(this).children().css("margin-top", "-2px");
}, function() {
$(this).children().css("margin-top", "-50px");
});
#iiw a {
display: block;
float: left;
}
Them a tags need to be block level.
It appears that elements that share the same line will align themselves with the lowest element in that line. When you set the top margin of an image to be much lower than the rest, the other images will drop down so their bottom edges align with it.
To avoid this behavior, try adding vertical-align:top; to your #iiw a img block. I've applied the change to your example here.