Hello, I am trying to style the h1 in two different parts, share your dream and Holiday dream.
I am centering the text using the text-align center in the main tittle class, this center the text in just one line, when I add width 45% to the h1 I achieve having two lines but the text-aligns center stop working.
I don't want to use <br> and I have been told to use width percentages but the problem is it is not center anymore.
Thank you
The text-align still works, it will center the text inside the element.
You change the width of the element, therefor it appears to be off center. So, you'll need to center the element as well. Add margin: 0 auto to the element and it should be working again.
Your text are already aligned in center, it's your div i.e. .main-tittle not aligned center to aligned that center use margin:auto;
.main-tittle{
width:45%; /* try to use pixels px value over-here instead of percentage */
margin:auto;
}
Related
I have a paragraph in the two divs with classes of .content1 and .content2 and I cant get them to center within the divs. Does one know why this is?
Demo
Code:
.content1 p, .content2 p {
text-align: center;
background-color: rgba(0,0,0,.02);
max-width: 280.34px;
}
as you can see text is aligned into your div.
look at 2 images with align left and align center
I see now I misread the question all those months ago. To center each paragrapah itself within its parent div, when it's wider than the max-width of the paragraph, you just need to add the margin property to the rule included in your question, setting margin-left & margin-right to auto, like so:
.content1>p,.content2>p{
background-color:rgba(0,0,0,.02);
margin:0 auto;
text-align:center;
max-width:280.34px;
}
Your text is centred in those paragraphs. However, as the text in those paragrpahs is just the same string being repeated multiple times, at some sizes you'll end up with the text on every line of the paragraphs being identical, making the paragraphs appear to be justified rather than centred. In those cases, though, you can just about see the centring on the last line which doesn't end with a comma.
To avoid any problems like this in the future, try using "lorem ipsum" as placeholder text instead.
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
I want to be able to keep a text on the left, but in the middle of a div.
<div id=sel>text goes here</div>
and my CSS for the same
sel{
text-align:left;
vertical-align:middle;
}
The characters and lines of the text may vary. I am more focussed on the text with a single line that sits on the top. I do not want to use position:absolute/relative.
Appreciate all help.
Thanks
Jean
Firstly, a side note: vertical-align only works with table cells. As a result, this problem is trivial with table cells. See Understanding vertical-align, or "How (Not) To Vertically Center Content".
Otherwise you will need to put that content inside another block and then vertically center that block within the outer block. See Vertical Centering in CSS.
If you are dealing with a single line only, the easiest way is probably to set the line-height equal to the height of the div, for example:
#sel {
text-align: left;
height: 4em;
line-height: 4em;
}
For other scenarios, have a look at this page