I tried centering my h1 in the body tag like this:
h1 {margin:0 auto}
http://jsfiddle.net/qPDwY/
But it doesn't center. How do I fix it?
In this case:
h1 {
text-align:center;
}
jsFiddle example
The margin:auto rule is used when you set a width on the element, which you haven't done.
You can center it by setting the width.
h1 {
width:500px;
margin: 0 auto;
background: gray;
text-align: center;
}
<body>
<h1>My Title</h1>
</body>
text-align: center is best choice but if you still want to center it using margin: 0 auto you have assign some width to H1 (a block) element.
You can center a block-level element by giving it margin-left and
margin-right of auto (and it has a set width, otherwise it would be
full width and wouldn’t need centering). That’s often done with
shorthand like this:
.center-me {
margin: 0 auto;
}
Source:
https://css-tricks.com/centering-css-complete-guide/#horizontal-block
Alternatively, you could try this:
h1 {
text-align: center;
margin: 0px auto;
display; block;
}
-div style="margin:0 auto; text-align:left; width:80px;"-
sample
change the width to change the position
What j09691 said does work, but not all the time.
This is why I use:
/* Put this inside element/class. */
transform: translateX(400px);
If it doesn't fit in the center of the screen for you, just adjust it.
Of course, you could use some css and/or js magic to automatically adjust it.
Related
I'm hoping for some enlightenment from a CSS whiz. Take a look at the bottom of any page at http://oicjapan.org - the address/phone info section would look a lot better in the center of the page, but I can't seem to get it to go there. Setting text-align:center on aside#footer-sidebar or div#fsidebar just centers the text inside the <li>, while the whole thing stays on the left side of #wrapper. And margin-left:auto; margin-right:auto; doesn't have any visible effect on any of several elements I tried (#footer-sidebar, #fsidebar, or #fsidebar-ul).
I'm not limited to CSS changes - if the markup needs to be changed, I can do that.
Remove float:left; from #hsidebar .widget-container, #fsidebar .widget-container or you can overwrite this rule using this:
#fsidebar #text-4 {
float: none;
text-align: center;
}
Then, remove float:left; from #fsidebar #text-4 .textwidget > div > div or overwrite it with this rule:
#fsidebar #text-4 .textwidget > div > div {
display: inline-block;
float: none !important;
}
Hope this will works!
If you want the block centered to the page, you will need to add a width to your #fsidebar such as:
#fsidebar {
margin: 0 auto; // does the same thing as margin-left: auto; margin-right: auto;
width: 400px;
}
If you are wanting the block to be moved inline with the right-column of your web page, why not just margin / pad the block over? Something along the lines of:
#fsidebar {
margin-left: 350px; // use whatever looks to your liking
}
Hi here's the code to center the footer text on your website, for a
#fsidebar {
text-align: center;
}
.widget-container {
margin: 5.0%;
}
I'm trying to style my headings with display:inline-block; but i've a problem with a behavior of the property.
Jsfiddle : http://jsfiddle.net/Tu2GU/
See the titles, when a title has a long text, the heading goes under the floated div. I want the heading to break and then display 2 lines (or more) and stay on the left of the floated div, not under it.
Can't find anything helping, thanks !
edit : i updated the jsfiddle : http://jsfiddle.net/Tu2GU/13/ (removed % width for the floated div)
I don't want to have 2 divs side by side, the floated div on the right is meant to be right there, like a page summary giving link inside the page.
Also, heading are under the floated div (in html code) not over.
Since the right list uses a percent width, you can set a max-width with a percent width
h2 {
... Your original CSS ...
max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}
Demo
I'd recommend using a class to apply to each header instead of using the same max-width on each h1, h2, etc, but that's just personal preference
If the width of the right floated div is set, use calc(100% - 440px) or whatever the left horizontal padding + right width is
Create a float: left; container using the CSS below:
.lfloat {
float: left;
width: 75%;
}
You just have to wrap your text in a new div:
<div class="lfloat">
<!-- content -->
</div>
Demo
This will contain the content to the left and keep your sidebar to the right.
Note: You must clear your floats with clear: both;.
Why not try floating the elements on the left instead of using inline-block?
* {
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1em;
}
.rfloat {
float: right;
width: 25%;
background: #9C3;
color: #111;
}
h1 {
float: left;
margin: 0;
padding: 10px 5%;
background: #06C;
color: #FFF;
}
h2 {
float: left;
margin: 0;
padding: 10px 5%;
background: #F33;
color: #FFF;
width:65%;
}
http://jsfiddle.net/g4Grv/
updated your Jsfiddle: http://jsfiddle.net/Tu2GU/12/
Main thing was a wrapping div around your h1 and p tag alongside of display:inline-block and vertical-align:top
Is this what you needed?
You have a few options. You can float the heading to the left so that it will slide up - you will have to set a width, though.
h2 {
float: left;
width: 80%;
}
Another option would be to set a max width. Since inline-block elements are technically block level, you can supply a width without breaking anything. You could try this:
h2 {
max-width: 80%
}
Yet another option would be to make the element inline. This will let the browser determine the best fit for the header.
h2 {
display: inline;
}
This will make the header wrap around the list and you may get the results you want. This method will make height and width parameters not work, so you will have to substitute those for line-height and padding
I have an iframe inside a div like this:
<section>
<div>
<iframe></iframe>
</div>
</section>
the iframe contains a youtube video in flash but that probably won't matter in this case.
I'm building a mosaic and is therfore trying to use the div to crop the iframe to an appropriate size.
this is done by
.section
{height: 251px;
width: 198px;
overflow: hidden}
Works great but I would like to center the video aswell. For images, I add them as background-images and use
background-size: cover
to center them. This is neat because they automatically rescale to maximum possible size. However this doesn't work for video. I would settle for simply centering the iframe vertically and horizontally, if possible.
Will adding this to your css help? It works if div is bigger than section.
section div {
margin-top:-50%;
margin-left:-50%;
}
http://jsfiddle.net/hvCXm/
Wrappping the iframe and use text-align: center; to align horizontal center
div {
text-align: center;
display: block;
}
or
iframe {
margin: 0 auto;
display: block;
}
Try:
iframe {
margin:0 auto;
}
The standard way to center block elements:
iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
The logo image at the top of this page http://54.251.57.136/ should center with:
.logo-img {
margin: 0px auto;
display: block;
}
... but it doesn't and I can't figure out why. Any help would be great.
Take off the float: left from logo-img and add text-align: center
Your div has a class .logo-img which is set to float:left. (and it would need a fixed width for the centering to work)
You are floating the image wrapper, if you adjust your css you can center it:
ADD THIS TO YOUR .logo-img
text-align: center;
REMOVE THIS FROM YOUR .logo-img
float:left;
What do you need to know:
Floated elements get off the normal document flow, so margin:0
auto; does not apply. You need to remove it.
margin:0 auto; on the .logo-img tag is not enough, you need to add
text-align:center; to allow the image to get centered.
Your logo-img class has a float: left
You must declare width on the div if you want it to center automatically with margin: auto. In this case width: 572px
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.