I have a series of elements that have a picture with a block underneath it containing text. Occasionally, the text becomes too long and breaks onto a second line. It looks like this:
I need to vertically align the text so it is always centered. I created a jsfiddle here to help provide an answer: http://jsfiddle.net/WDChT/
Any ideas how I can do this given my html/css?
You can use display:table-cell with vertical-align:middle:
http://jsfiddle.net/WDChT/3/
What I added:
span.redStrip {
padding:0 11px;
height:36px;
}
span.redStrip p {
vertical-align:middle;
display:table-cell;
height:36px;
padding:0;
margin:0;
}
Few things to note:
Support is lacking in older versions of IE (what else is new?)
You have <p> inside <span> which is invalid. You should wrap them in reverse: <span> inside <p>. I used your original markup for the demo.
I moved your padding to the inner element (the <p> with the vertical alignment set) and removed it from the outer element (the wrapper <span>). Once again, these elements should be reversed.
in the container box:
line-height:60px;
height:60px;
inner box:
display:inline-block;
vertical-align:middle;
http://jsfiddle.net/8QMGf/
note that inline-block doesn't work with older IEs, but the result will not be so bad
HTH
Related
I have an h3 tag which hold text inside of it that doesn't align correctly with the content below it. It can't be margin or padding because it is the h3 itself which contains the extra space to the left of it. I have use position relative to align it with the content below it ,but I want to understand what the problem is.Thanks in advance!
HTML:
<div class="details_section">
<h3>Details</h3>
<p class="bold">Name:</p>
<p>Kaleb Meeks</p>
<p class="bold">Age:</p>
<p>19</p>
<p class="bold">Location:</p>
<p>Mississippi,United States</p>
</div>
CSS:
.details_section {
width:100%;
height: 100%;
padding-left:5%;
margin-top:7%;
}
.details_section h3 {
font-size:28px;
color:#005689;
font-weight:normal;
}
.details_section p {
display:block;
font-size:14px;
color:#000;
}
It's just the font that determines that. Change the font to Times New Roman and the margin is gone. Change the D into a T and there is no spacing anymore. In a font, each letter has some kind of bounding box and some letters have a bigger bounding box than the letter itself.
If you want to remove it, (I would definitely not recommend that, since it is made like this because of the good lookings), you can do it by applying a negative margin-left to the tag. But keep in mind that this can change from device to device and especially between various starting letters. So just don't do it ;-)
See the work around in action here: http://jsbin.com/jexijonuru/edit?html,css,output
Including a reason why it is not a good idea.
You could nudge this with position:relative; right:2px; but that needs to work with whatever else your doing.
I have a menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
I have something like this:
<p style="text-align:center;background-color:yellow;"><span style="vertical-align:middle;">My text goes here...</span></p>
Obviously, as you can see here, my intention is to center the span inside that paragraph (both horizontally and vertically). The text is centered horizontally just fine, but why isn't the vertical centering not working? What's wrong here?
Thank you
http://jsfiddle.net/gxArp/
Using display:table; on p and display:table-cell; on span.
p{
text-align:center;
background-color:yellow;
height:50px;
width:100%;
display:table;
}
span{
display: table-cell;
vertical-align: middle;
}
Vertical-align aligns the content inline. It is not the CSS equivalent for the HTML attribute valign="middle".This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a td element. Please check this link http://phrogz.net/css/vertical-align/index.html on how to achieve vertical centering.
Hope this helps.
So the problem is when you have a block of text, and an image that is slightly too tall that you want to place in-line with the text. For example, a smiley. It will cause the line height of that line of the paragraph to grow, making the block of text look ugly.
I've actually already come up with a solution, but it's messy and I don't like it... If I wrap the smiley in a relatively-positioned div, and give it an absolute position I get the effect that I'm after:
.holder{display:inline-block;position:relative;width:16px}
.holder img{position:absolute;top:-16px}
<span class="holder"><img src="/smiley.gif" height="16" width="16"></span>
But it adds extra markup. Is there any way to achieve this without adding extra HTML elements - a pure CSS solution (no javascript!)
I wonder if I'm missing some application of overflow/vertical-align/float/display etc?
Many thanks!
Depending on the desired image position and whether you have a fixed line-height in pixels you could set a maximum height on your image that equals your line-height and set vertical-align: bottom on the image so it fits exactly into your line.
See this fiddle for an example.
p {
line-height: 18px;
}
p img {
max-height: 18px;
vertical-align: bottom;
}
<p>Some text <img src="/smiley.gif"> more text.</p>
Set the image as a background of a DIV and give the DIV fixed dimensions.
<div class="smiley"></div>
CSS:
.smiley {
float:right; <-- or inline-block if you want.
background-image:url(../smiley.gif);
height:20px;
width:20px;
}