Im trying to align my elements at center but I´m having some problems in this process. I aligned the "Title" at center and it works, and now I´m doing the same process to other elements but its not working.
Anyone there can see what is wrong? Thank you!
My jsfiddle with the problem:
http://jsfiddle.net/mibb/6SLa5/
My Html:
<section id="loop-news-container">
<article id="loop-news">
<h1>Title</h1>
<span>Date of Post</span>
<img src="image1.jpg" />
<p>Post of 1 <a class="buttonl" href="#show" id="verfancy">read more</a></p></p>
</article>
My css:
#loop-news-container{width:100%; height:auto; float:left;}
#loop-news{width:280px; height:250px; background:#fff; margin:5px auto 5px auto;}
#loop-news h1 {font-family:'bariol_boldbold'; text-align:center; font-family:'bariol_boldbold';margin:0 auto 0 auto; background:#F00;position:relative; text-decoration:none;}
#loop-news h1 a{text-decoration:none; font-size:20px; color:#002e5e; font-weight:100; }
#loop-news span{font-family:'bariolthin';font-size:14px; font-weight:normal;color:#888;margin:0 auto 0 auto; text-align:center; background-color:#FF0; }
The text of the <h1> can be centered with text-align:center because it takes the whole width of its container (it's a block-level element). The <span>, not so much, as it only takes the width of its content (it's an inline element) - your coloured background make this quite visible. In fact, basically every child element you have there (other than the <h1>) is an inline or inline-block element, so applying text-align:center to them directly won't work.
If you wanted to center all the elements in #loop-news, just adding this style would do it:
#loop-news {
text-align:center;
}
This causes all inline content of #loop-news to be centered. Note that this also renders text-align:center on the <h1> unnecessary.
Here's a JSFiddle to show you what this does. If this isn't what you wanted though, let me know and I'll be happy to help further.
Related
I divided my page in sections, one of the sections contains a h2-Tag (the title of the section) and a div (that contains a p-Tag).
I want the text to be perfectly centered inside the section, because of that, I've used flex to center the element.
Now I need the title to be aligned on the left side (see image for better explanation).
https://ibb.co/b5DSpT
If I add it to the div affected by the flex-property the styling is completely wrong. If I remove it from the div, the text isn't perfectly centered anymore, because the h2-tag occupies a small amount of the section.
Any ideas how to solve this problem?
Thanks,
Mike
You don't need to use flex. Check the code below.
.wrapper{
padding:25px;
background:#d0e1d9;
}
.title{
color:#000;
font-size:20px;
margin:0 0 25px 0;
}
.section{
padding:50px 25px;
text-align:center;
font-weight:bold;
font-size:20px;
background:#e5e5e5;
}
<div class="wrapper">
<div class="title">Uber uns</div>
<div class="section">This is the Div with the Text</div>
</div>
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.
i want to center my block menu in the middle, but i also want it to lay next to each other without any huge space.
i tried to float the entire thing and set the margin left and margin right to auto. But after searching the web, i found out that is not possible to center something that is floating.
Then i tried to set the block to inline-block and take away the float element. And again settiing the margin to auto. Now this dosen't seem to work either. I read someplace that you could set the text-align to center, this is centering my text in the block, but the block itself isn't getting in the middle.
my entire menu code in css at this moment:
a.menyStil
{
display: inline-block;
width:150px;
height:25px;
margin-right:auto;
margin-left:auto;
background:#dca; border:1px solid #000;
text-align:center;
text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;
line-height:25px;
overflow:hidden;
}
a.menyStil:hover {background:#764;}
a.menyStil:active {background:#c00;}
and relevant html code:
<p> <a class="menyStil" href="Hjem.html"> Hjem</a>
<a class="menyStil" href="Kontakt.html"> Kontakt oss</a>
<a class="menyStil" href="om_oss.html"> om osst</a>
<a class="menyStil" href="testing.html"> Testing</a></p>
i would really appreciate help :)
Add this in your css code
p{
width: 650px;
margin: auto;
}
Demo: fiddle
you should add margin auto in p. Because its containg the a. so its come center.
I hope this may be helpful to you.
p {
text-align: center;
}
http://jsfiddle.net/B8gFC/
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}