I'm still learning my way around CSS. I have a row of li blocks and they're not aligning at the top. I can deduce that somehow the p block somehow pushes the li up, but I don't know why. Can anyone explain?
http://codepen.io/mesu/pen/bVoOrg
li {
display:inline-block;
height: 200px;
width: 450px;
border: 2px solid black;
text-align: center;
}
inline-block elements by default align to baseline (I believe). You can change this with:
li {vertical-align: top;}
So the more information text of the first div is aligning with the h3 in the second div.
Try this :
li {
display:block;
float:left;
height: 200px;
width: 450px;
border: 2px solid black;
text-align: center;
}
Try adding display: table; width: 100%; to the p elements.
Example: http://codepen.io/anon/pen/BomLMp
Related
How can I align text in the center of a div without using height, line height and padding?
<div id="slot">
<p id="element">100 </p>
</div>
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
}
#element {
text-align: center;
}
I supose that you want to align vertically right? I don't know if I've understood well what you are asking, but I've done this.
HTML
<div id="slot"><p id="element">100 </p></div>
CSS
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
display:table;
height:150px;
text-align: center;
}
#element {
display:table-cell;
vertical-align:middle;
}
I only added three lines in CSS. display:table for the parent and display:table-cell for the child. Finally I added vertical-align: middle to display the text on the middle if the height increments, and put text-align:center at container div.
Here you have an example
The text-align is a property to be set on the parent really, so put it in the #slot css
http://jsfiddle.net/uFpCL/
#slot {
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
If you want the content of the #element tag to be centered, take #newpatriks' approach. But if you want the #element to be in the middle of the #slot element, you could add this css to the #slot element:
#slot {
display: table-cell;
text-align: center;
vertical-align: middle;
}
This way, all children of #slot will be centered in there.
http://jsfiddle.net/A7S8h/3/
I think you should explore the flexbox. Its supposed to be the Holy Grail of layouts using css. A quick tutorial:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use margin to adjust your text
#slot {
margin:auto;
width: 70px;
border: 2px solid black;
background-color: #00ffee;
overflow: hidden;
text-align: center;
}
it works fine now try ..
jsfiddle
I see this is pretty outdated question, but in case someone still looking for answer, here is the simple solution for 2022:
just set class to element .centerInsideDiv and in css:
.centerInsideDiv {
display: grid;
justify-items: center;
align-items: center;
Hope i helped somebody today!
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?
Please stop posting solutions using position: absolute. As you can see in my code, I used text-align: center which is important there.
One simple fix is to set the line-height to be the same as the container height:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom on the img rule.
However, if you add other elements like captions or social media links this could affect how you implement the solution.
For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle.
Only changed the parent to position:relative and the child to position:absolute.
Update your CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/
I have a template which has 3 equally spaced boxes, the problem is that i am unable to get the last box to align correctly the first two elements.
how do i add a 3 block equally spaced box in css without tables?
my attempt http://khine.3b1.org/activities/activities.html
any advise much appreciated.
thanks
Make all three boxes float left:
.box ul.supports-list li.last {
width: 200px;
position: relative;
float: left;
}
And provide more width overall:
.box .holder .frame {
background: url(./box-b.gif) no-repeat 0 100%;
width: 620px;
padding: 18px 4px 42px 16px;
}
try to change the next CSS rules to:
.box ul.supports-list {
font-size: 11px;
list-style: none outside none;
margin: 7px 0 0;
overflow: hidden;
padding: 0;
}
.box ul.supports-list li.supports-list-item {
display: list-item;
float: left;
outline-style: none;
width: 200px;
}
.box ul.supports-list li.last {
float: left;
width: 200px;
}
My guess would be to put each box into a div, and then adjust each div's margin-left and margin-top properties to get them to all line up. You'd also want to set the float property of all of the boxes to left. It might not be the most-widely-accepted way of doing things, but that's how I usually solve problems like this.
You can take a look at this example jsFiddle I did for you here: http://jsfiddle.net/Cwca22/g8x5E/ - Hope this helps!