I have a bunch of "strips" of images that all add up to one image. Now I need to border the completed image and put that box in the middle of a html page.
No matter what I try, I can't seem to center the <div> that contains the multiple <img> tags. I'm looking for a purely CSS solution with as little text as possible (as I need to create a bash script that produces this page).
Thanks,
Milan
edit:
Apparently i need to provide code, eventhough it's very simple:
<html><head>
<style>div{font-size:0px; border: 5px solid red; display:inline-block;}</style>
</head><body>
<img ...><img ...><img ...><img ...>
</body></html>
div{
width: 50%;
margin: 0 auto;
}
or, if you just want everything centered, use text-align: center; on the body.
<div style="text-align:center">
<div>This is the text to be centered</div>
</div>
To center horizontally, you can use the margin: auto; attribute in css
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 100%;}
I made a CodePen that I think will solve this issue. Basically you're going to want to use
style="text-align:center"
on the container div
http://cdpn.io/IhLBK
Related
Let's say that I have an image that can be a variable width (min:100px, max:100% [760px]). I also have a <p> element that is to be shown right below the image. I'd like the <p> to end up with the same width as the <img>, but I can't seem to find an answer.
Here is the code involved in such a scenario jsfiddle:
html:
<div id='page'>
<figure>
<img src='http://www.myimage.com/img.jpg'/>
<p>Hi there. I am some text. I would like to start where the image starts :(</p>
</figure>
</div>
css:
#page {
width:760px; /* arbitrary */
}
figure img {
display: block;
border: 1px solid #333;
max-width: 100%;
min-width: 100px;
margin: 0 auto;
}
figure p {
/* ??? */
}
Any ideas?
You can use display: table on the figure and set a small width on it. Because it's a table layout it'll then become as wide as the content, in this case the image.
figure {
display: table;
width: 1%;
}
Demo
It is inheriting from #page div. not from the image. Please see the same fiddle updated.
But, You can control individual elements. You have to specify how you wish it to look like.
Here is the FIDDLE that I made using
HTML:
<div id='page'>
<figure>
<img src='http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg'/>
<figcaption>Hi there. I am some text. I would like to start where the image starts :(</figcaption>
</figure>
</div>
CSS:
#page {
width:760px; /* arbitrary */
}
figure{
padding-left: 10%;
}
Actually there are several ways to make an image caption, such as using <table>. I'm not saying that this is the best way to do that. But this is the easiest way since I see you're using <figure> there. I hope this helps you.
Sometimes, I need to restrict section of a page to a fixed width. But the background should extend all the available space.
With CSS2 I used to do something like this (jsfiddle: http://jsfiddle.net/fniwes/wwVp4/)
css:
#container { background-color: #ddd; }
#content { width: 300px; margin: 0 auto; }
html:
<div id="container">
<div id="content">All the content inside container should be limited to 300px but the background should cover all the screen width</div>
</div>
The content here is just a plain text, but it is usually something more complex.
Is there a better way to accomplish the same result without the extra #content tag? I don't mind using CSS3 or something that is only supported by Chrome or Firefox.
Just for clarification. I want to remove #content tag. I want the markup to be
<div id="container">
All the content bla bla
</div>
(and I want to style no tag other than #container.. maybe it is not possible, but maybe there is something new in CSS3 or other proposal that I don't know)
There is the calc() function in css3, you can use that like this:
#container { background-color: #ddd; padding-left: calc(50% - 150px); padding-right:calc(50% - 150px);}
is there any specific reason you are against using a container div? You could do:
#content { background-color: #ddd; width: 100%; margin: 0; padding: 0 50%; }
But I wouldn't reccomend it and the best solution is still to use containers
I don't want to add CSS to my div element (e.g. <div style="text-align: center;">).
I only want to add CSS code to the button element.
<div>
<button>Button</button>
</div>
How can I center the button horizontally in this case?
button {
margin:0 auto;
display:block;
}
button {
margin: 0 auto;
display: block;
}
<div>
<button>Button</button>
</div>
You need display: block; margin: auto; on the <button>.
jsFiddle
Others have already mentioned the margin: 0 auto; method, but if you wanted an explanation, the browser splits up the available space in whatever container your element is in.
Also important to point out is you'll probably need to give your element a width, too, for this to work correctly.
So, overall:
button {
display:inline-block; //Typically a button wouldn't need its own line
margin:0 auto;
width: 200px; //or whatever
}
i have one div and some text inside it. to make my content horizontally and vertically center i use a css. it works fine in firefox but content not being vertically center when test the following code in IE6.
so please guide me what i need add or change in my css.
my html code is
<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
text-align: center;
display: table-cell;
vertical-align: middle;
background-color: green;
height: 200px;
width: 250px;
}
</style>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>
please have look at my css and tell me why it is not working in IE also please rectify my css in such a way as a result it should look same in all the browser.
thanks
you can wrap your text with a span and then set position:relative and top:45%;
.content span {
position:relative;
top:48%;
}
live example: http://jsbin.com/ovabo4/3
Here you will find a great guide: Vertical centering with CSS
A good method is to do this, so it is always exactly in the middle (only works if you have a fixed height div)
<div class="centered"></div>
html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */
After lots of attempts and search I have never found a satisfactory way to do it with CSS2.
A simple way to accomplish it is to wrap it into a handy <table> as shown in the sample below. Do you know how to do it avoiding table layouts and also avoiding quirky tricks?
table {
margin: 0 auto;
}
<table>
<tr>
<td>test<br/>test</td>
</tr>
</table>
What I want to know is how to do it without a fixed width and also being a block.
#Jason, yep, <center> works. Good times. I'll propose the following, though:
body {
text-align: center;
}
.my-centered-content {
margin: 0 auto; /* Centering */
display: inline;
}
<div class="my-centered-content">
<p>test</p>
<p>test</p>
</div>
EDIT #Santi, a block-level element will fill the width of the parent container, so it will effectively be width:100% and the text will flow on the left, leaving you with useless markup and an uncentered element. You might want to try display: inline-block;. Firefox might complain, but it's right. Also, try adding a border: solid red 1px; to the CSS of the .my-centered-content DIV to see what's happening as you try these things out.
This is going to be the lamest answer, but it works:
Use the deprecated <center> tag.
:P
I told you it would be lame. But, like I said, it works!
*shudder*
I think that your example would work just as well if you used a <div> instead of a <table>. The only difference is that the text in the <table> is also centered. If you want that too, just add the text-align: center; rule.
Another thing to keep in mind is that the <div> will by default fill up all the available horizontal space. Put a border on it if you aren't sure where it starts and ends.
The following works well enough. note the position, and the use of auto
<div style="border: 1px solid black;
width: 300px;
height: 300px;">
<div style="width: 150px;
height: 150px;
background-color: blue;
position: relative;
left: auto;
right: auto;
margin-right: auto;
margin-left: auto;">
</div>
</div>
NOTE: not sure if it works in IE.
In FF3, you can:
<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>
This has the advantage of using whatever element makes most semantic sense (replace the div with something better, if appropriate), but the disadvantage that it fails in IE (grr...)
Other than that, without setting the width, your best bet is to use javascript to precisely position the left-hand edge. I'm not sure if you'd class that as a 'quirky trick', though.
It really depends on what you want to do, of course. Given your simple test case, a div with text-align: center would have exactly the same effect.
#wrapper {
width: 100%;
border: 1px solid #333;
}
#content {
width: 200px;
background: #0f0;
}
<div id="wrapper" align="center">
<div id="content" align="left"> Content Here </div>
</div>