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
Related
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;
}
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 have navigation points with text in it (longer and shorter). The text should be centered, but the text itself is aligned left; complicated to explain. Please have a look at my picture:
The upper three are my is-state but the lower three the should-be-state.
With display: inline my elements have the correct size (even with word breaks). So I gave the parent text-align: center to center the text-container horizontally. But: the text within the container should have text-align: left. But with display: inline this is not possible.
BTW: display: inline-block is not a solution because it strechs the container with longer text to 100% width even if the broken text does not fit.
See here: http://jsfiddle.net/z5jo64bj/
Is there a way without JavaScript to solve this?
Basically, I want to center text, ignoring any floating sibling elements.
At first, I thought this wouldn't be a problem, as I was under the impression that a floating element did not take from the width of any sibling elements.
Example (I want the red text to be at the center of the blue box, despite the green text)
How is this best achieved?
You can't. If it were centered within the parent box, then the float would overlap the content at some point, which would be defeating the point of the float. There are two approaches you can use here. If you know the width of the float, you can apply an equal negative right margin. Otherwise, you can absolutely position the element like this.
Here's a link to a working fiddle: http://jsfiddle.net/cD657/3/
(in your example, you opened a <span>, and closed it with </div>)
I made it a div and gave it margin: 0px auto; and a width. -seemed to do the trick
You can keep as you have it but just adding padding on the opposite side with the same pixel value as the width of the floating element.
.parent{
text-align: center;
}
.centered.element{
padding-left: [width of floating element]px;
}
.floating.element{
float: left;
}
To find the width easily just use Developer Tools in any modern browser to Inspect the element.
See fiddle here: http://jsfiddle.net/cD657/369/
Note: This may not work if the centered element has an assigned background color.
Css question here: How do I set the width of a container just wide enough for how many characters are in the container?
Thanks for your help, -Matthew
display: inline-block is an easy way to do this.
float: left is another option.
Make sure an explicit width is not being set, because that will disable the shrink-wrap behaviour.
http://jsfiddle.net/5jyAg/
it depends on the container, if you use a span as the container, it will always be as wide as the characters in it.
but a span is inline element
You can try to put and even Padding into your style. For example if your markup looks like this.
<div>
<p class="paddThis">Your text</p>
</div>
and in your style sheet set the padding of the right and/or left of the text your text will push the left and right border of your container a certain amount of pixels away from you text creating which should accomplish what you are trying to do.
Your style sheet might look like this
.paddThis
{
padding: 0 5px 0 5px;
}