I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
Related
I am creating a simple site and I found out that I can center <img> tags with text-align: center; but id does not work on block elements like <div> for example. Can someone explain to me how exactly the text-align works and if it's god practice to use it to align images?
Thank you very much in advance :)
UPDATE
I also know about the margin: 0 auto; which in some situations works and in other situations it refuses to center elements.
It totally depends on your requirement, there are various ways to do so, one is that img is an inline element, so setting it to block and using margin: auto; will center your img
img {
display: block;
margin: auto;
}
Demo
Another way is which you are trying to attempt, which needs text-align: center; to be declared on the parent element and not the img tag itself, cuz I doubt you are using text-align: center; for the img tag and not for the parent... Where in the above solution we are targeting the img tag, so there's a difference between the two..
Demo
What's the good point here?
You don't have to make the img a block level element.
No need of margin: auto;
What's the bad point here?
If you have p elements inside the div, they will be centered aligned as well, because the align property is inherited.
Demo
So what to do now? Align the p elements to the left using text-align: left; property, and here we will be targetting p like
This will keep the image centered and will align the p to the left
.wrap {
text-align: center;
}
.wrap p {
text-align: left;
}
Demo
Last but not the least, we can also use CSS Positioning where you can have a parent element set to position: relative; and than we use position: absolute; for the img tag, and than we assign top: 50% and left: 50% and than we deduct the 1/2 of total height and width of your img by using margin-top and margin-left properties respectively. This method comes handy in case where you need the image vertically as well as horizontally centered. (This method will require fixed height and width to be declared)
<div>
<img src="img.png">
</div>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
My advice is to use text-align property for the texts only (of course there could be exceptions). And for centering images you can simply do like this:
img{
display: block;
margin: 0 auto;
}
A 'div', or any block element, without a declared width, can't be centered with margin: 0 auto;, but images will. 'Auto' counts pixels for you and make an element appear in the center
See W3:
http://www.w3.org/TR/CSS21/text.html#alignment-prop
Whether you want to use margin:0 auto; or text-align:center , this really depends on what you're doing exactly and the surrounding markup, context.
I always try to use text-align:center; when possible. I also define images as a block which helps auto margins.
Also a great article by Chris at CSS tricks: http://css-tricks.com/centering-in-the-unknown/
The property text-algin:center basically does what it says. Its supposed to center text. You can either apply directly to the text that you want to center or apply it to the parent div. In this case every text within this div will be centered.
The better practise to center, e.g., images, is to use margin: 0 auto; as many have already suggested. Specifying auto tells the browser to automatically determine the left and right margins itself and to set them equal. It therefore guarantees that both margins have the same size, which is why the object is centered horizontally.
Hope that helps!
I have to design a circle with two h3 in it. Both of them should line up at the left side but still be centered in the circle.
I already have positioned everything right but I dont know how to left-align both <h3>.
Here is the js fiddle.
Ok I guess I explained it wrong. I want the <h3> lined-up left. But both maybe wrapped up in another element should be centered in the circle referring to the <h3> with the greatest width. But the text in there is a sample text. I cannot give a wrapping element a fixed width and position it with margin: 0 auto.
Wrap the H3 elements in their own div and position it using margin: 0 auto.
Once that is done, you can simply left or right align the text within the div.
eg:
<div class="h3Wrapper">
<h3>Foo</h3>
<h3>Bar</h3>
</div>
CSS:
.h3Wrapper { margin: 0 auto; }
h3 { text-align: left;}
Remove the text-align:center and use margin:auto. Please check http://jsfiddle.net/B3vdz/7/. I hope this is how you want it.
Is this how yout want it?
I used a new div for the text.
#lefft{
width: 90px;
margin: 0 auto;
padding-top: 50px;
position: relative;
}
http://jsfiddle.net/B3vdz/1/
Alright, so I'm trying to make div elements align down the middle (between two images) without using tables (because tables shouldn't be used for styling/layout).
I have the following individual elements:
img
img
div
And I want the final output, using CSS, to be:
Seems simple, right? Well, the trick is that the scores to the left and right of the images are variable width, and I want the center of the rounded rectangle to slice right between the two images, regardless of the widths of the score values. (Thus, I can't just wrap a div around the whole block and use text-align: center. Would do me no good.)
As you can see in my example pic, there is more space between the edge of the rectangle and the score on the right than there is on the left, because the left score itself is wider.
Also note that the images expand slightly above and below the rectangle div, which is another reason why using a table wouldn't be ideal.
I've tried to accomplish this layout using combinations of margin-left: auto, margin-right: auto, display: inline-block, etc., but I can't get the centered effect I'm looking for.
Here is a jsfiddle to play with.
Your help is greatly appreciated!
Here's the deal:
.team should have width: 50% and should be floated left. Or right. Whatever.
The images should be floated toward the center. The one on the left should be floated right, the one on the right should be floated left.
The images should also have position: relative and a negative top.
.team should also have text-align set. The one on left should have text-align: right
The outer container should have overflow set to visible (which is the default - I just wanted to mention it because other answers told you to use overflow: hidden. Which would break your "outside the box" stuff).
That should get you what you want. And here's proof (started before you posted your fiddle)
UI elements (things that are not content) should be CSS backgrounds. Make a composite image and make it the background for a wrapping DIV, then make two inside it - one floated left, the other floated right and with a bit of margin and padding everything will work just fine.
<div class="wrapper">
<div class="scoreLeft"></div>
<div class="scoreRight"></div>
</div>
All of the inner child elements of your div should have float: left. Then, the parent div should have overflow: hidden. From there, you can then add additional margin's to the div img elements.
Here is an example solution. The idea is that you have a wrapper do the grey background and size the bar. You than have a div half the size and align the text towards the center while putting enough padding to allow for background images.
HTML
<div class="wrapper">
<div class="scoreLeft">1231231</div>
<div class="scoreRight">123</div>
</div>
CSS
.wrapper {
background: grey;
background-image:url('http://i.stack.imgur.com/4fkZv.png');
background-size:400px 50px;
height: 50px;
width: 400px;
display: table; //Allow for vertical align
table-layout: fixed; //Allow for fixed widths of children
}
.scoreLeft, .scoreRight {
color: white;
display: table-cell; //Allow for vertical align
vertical-align: middle;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; //Allow for 50% width with padding sitting inside the 50%. This can be mathed out so the width + padding * 2 = wrapper width and then you can use the default box-sizing.
}
.scoreLeft {
background-image:url('http://i.stack.imgur.com/CmWiD.png');
background-size:50px 50px;
background-repeat: no-repeat;
background-position:right;
text-align: right;
padding-right: 55px;
}
.scoreRight {
background-image:url('http://i.stack.imgur.com/Gkll9.png');
background-size:50px 50px;
background-repeat: no-repeat;
padding-left: 55px;
}
I have two columns (div { float: left; }, as you may know) in the Bootstrap Structure. The problem is to make the content inside one div go the middle (vertical). So, it doesn't matter the height of the second columns, the second column will always be on the middle.
It is not an line of text. In my case will be an image and a title. Two blocks of elements.
Here's the example: http://jsfiddle.net/almino_melo/L4rK5/.
I tried to put another div inside it with display: table; rule and then another one with display: table-cell; and vertical-align: middle;. But it didn't work.
Here's my updated fiddle, http://jsfiddle.net/L4rK5/9/ , it does what you ask but does seem really rather crude, note the change in the html div structure as well as the following css rules.
.text-center{
width: 100%;
position: absolute;
top: 50%;
}
I am using the yui-grids css (irrelevant if you don't know what this is) with three columns. and I'm putting all the fancy design stuff on the left column and using z-index and relative psitioning bringing them in the center. and then putting all the important stuff like forms, inputs buttons, links and context in the center. Is this wrong. I've never seen this done so I was wondering maybe there is something I don't know! or am not considering. Should I just use one column?
I'm not totally sure what you're asking, so I'll give it a shot:
Columns
If you're going with a column layout, you should give just floating elements a go. Due to how floating works, a clearfix hack will be nessecary (link provided below). Clearfix allows child elements to be floated while maintaining the parent element's height and block nature. Clearfix can only be added to block elements.
For my example, we will be going with a 2 column layout -- one #content column and a #sidebar column -- you could do two, three or more.
For the parent div (that contains the #content and #sidebar elements), you'll need to add a class="clearfix".
For the content div, you'll want to float it to the left. For the sidebar div, you'll want to float it to the right.
Now, the CSS:
#parentDiv { width: 750px; margin: 0 auto; }
#parentDiv #content { float: left; width: 500px; }
#parentDiv #sidebar { float: right; width: 200px; }
This should produce a 750px box with a content element on the left and a sidebar on the right with 50px in between both elements (750-(500+200) = 50).
Floating Module
If this isn't what you wanted, and were looking to produce a module element (lightbox, popup window, etc) instead, this is easy too.
First, create a div called #module. Put in your content into it. Let's say you want to give it a width of 500px and you want the height to be static at 300px. So we'd do this CSS:
#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; }
What's going on here?
The #module element is being set to position: absolute. This means that it will be floating around the window, and is not constrained to it's parent element. We position it to be 50% from the left of the window and 50% from the top, so it gets in the middle of the window. Percent values are nessecary as they are adjusted when the window resizes. Without the margin, the element's top left corner will be 50% from the top and 50% from the left, so we need to use margin to move it back half of it's width and half it's height. This will allow us to have a box perfectly centered in the middle. The z-index is added to make sure that the element is on top of any other element, including , and other positioned elements.
I hope this helps.
Links
Clearfix: http://gist.github.com/550114
This kind of layout wouldn't be correct in my opinion.
The design of an element must be described in that particular element.