In this question positioning text of anchor within a div and given the same code which I repeat here:
HTML Markup
<div id="header">
Cattle Farms
</div>
CSS Style
#header a {
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}
Answer
div#header a {
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}
Fiddle
My question is why does not the line-height make the a break out of the div
It does break out of the div. If you put a span inside the a tag and give it a display of inline-block (and a background-color so you can see it) you'll realize it does. Remember the span inherits the line-height. Take a look:
http://jsfiddle.net/fnX9n/6/
Give the a a bigger line-height and without anything else you'll also be able to realize it is breaking out of the div: http://jsfiddle.net/fnX9n/7/
Related
I found this stackoverflow answer very interesting. It works to vertically center text of any length in a div of any height. Basically it uses a empty <span> tag directly in front of the node containing text, and
HTML:
<div>
<span></span><p>This is really really long text but it will be centered vertically.</p>
</div>
CSS:
div {
background: yellow;
color: red;
width: 200px;
text-align: center; /* horizontally center */
height: 300px; /* any height */
padding: 0 20px
}
div span:first-child {
height: 100%;
vertical-align: middle;
display: inline-block;
}
div p {
margin: 0;
vertical-align: middle;
display: inline-block;
}
Also even more interesting is if you separate closing span tag (</span>) and opening paragraph tag (<p>) on two separate lines, or if you add a whitespace between the two, the trick breaks.
My question is - how does this trick work? How is span helping center the text? And why does it break when a newline/whitespace is added in HTML between closing </span> tag and opening <p> tag?
I have created a fiddle to demonstrate both points: https://jsfiddle.net/axRxE/385/
My question is - how does this trick work? How is span helping center the text?
Since you give the span inline-block property, the span then inherits it's parent height (with height: 100%) - which in you example is a fixed 300px. And since you gave also the same property to the paragraph, those two elements are one next to each other. See an example:
#parent {
height: 300px;
}
span {
height: 100%;
display: inline-block;
/* some width and background-color for demonstration */
width: 5px;
background-color: red;
}
p {
margin: 0;
display: inline-block;
}
<div id="parent">
<span></span>
<p>foobar</p>
</div>
And you also put vertical-align: middle (which works with inline-block) on both of them, which gives them that align (you only need to add that property to the larger one):
#parent {
height: 300px;
}
span {
height: 100%;
display: inline-block;
/* some width and background-color for demonstration */
width: 5px;
background-color: red;
/* added vertical-align */
vertical-align: middle;
}
p {
margin: 0;
display: inline-block;
}
<div id="parent">
<span></span>
<p>foobar</p>
</div>
And why does it break when a newline/whitespace is added in HTML between closing </span> tag and opening <p> tag?
That's simple - when you use inline-block there is always a whitespace issue between them. And since you didn't add some width to the paragraph, it takes all the width it can take, and with that additional width from the whitespace, the paragraph goes below the span.
In your example, your parent has 120px width, the span uses 0px, so the paragraph takes all of the parents width, which is 120px. Now, with the additional whitespace (which is ~ 4px), since she paragraph uses all the width, the whitespace doesn't fit so the paragraph "breaks" - it goes below the span.
Also check:
inline-block element with no text renders differently
Vertical-Align: All You Need To
Know.
.calloutWrapper
{
background: green;
height: 50%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.callout {
width: 24%;
min-height: 100%;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color: blue; }
.stretch {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
vertical-align: top;
}
http://jsfiddle.net/yux07nom/
There is white space after the "callouts" seen with the blue backgrounds. This extends beyond the green background of "calloutWrapper" I believe its caused by the .stretch applied to the span.
First off you close out the body twice which doesn't cause your problem but should be resolved
</body>
<script>
</script>
</body>
Then the white space is caused by your .stretch span
display: inline-block; is the culprit
Remove that and your good to go.
A bit more info about what you're trying to achieve with that span could help provide a better answer.
If you are trying to achieve responsive boxes you could use a css responsive grid template like bootstrap or foundation.
Alternatively you could just float left and add margin right to the first 3 elements.
eg
http://jsfiddle.net/yux07nom/5/
<div class="calloutWrapper">
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout">Callout</div>
<div class="callout last">Callout</div>
</div>
And the CSS
.callout {
width: 24%;
min-height: 100%;
background-color: blue;
float:left;
margin-right:1.3333333333%;
}
.callout.last{
margin-right:0;
}
I'm not sure there's an ideal solution to this. Your best bet is to set the font size of the .calloutWrapper div to zero and then reapply a useful font-size value to the .callout divs, like this : http://jsfiddle.net/2dgx98ye/
Note however, that some older browsers, particularly some used on mobiles, try to apply a minimum font-size which breaks this. In modern browsers, even when the have a minimum font-size configured, do not enforce it on elements where the font-size is 0.
Inline-block elements will preserve one space in the HTML. Two choices:
Have no space between those inline-block elements in the HTML.
Float:left those inline-block elements
This fiddle tells the story of a lonely div. One day, an inline img visited the lonely div. They became good friends. But no matter what the img did, it was never quite able to fill the div's void, and thus the lonely div remained depressed:
HTML:
<div><img src="..."></img></div>
CSS:
div {
background-color: red;
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
}
img {
display: inline-block;
height: 16px;
width: auto;
position: relative;
background-color: green;
}
Say, who can cure the div of it's feeling of emptiness?
Update: The original fiddle can be found here.
The problem is fixed in your jsfiddle when I add "line-height: 0" to the containing div.
The image is display: inline-block which takes into account white space and line height. I suggest adding vertical-align: top; to the image's style rule.
img {
...
vertical-align: top;
}
Demo: http://jsfiddle.net/y7dd2qmx/
I have been searching for an answer for this for days now and no solution seems to be the correct one for my needs. Please help!
I have two divs for which I want to fill 100% width of the browser, and have more of these which will stack to fill the height. I want the text in each of these (which is being generated from javascript ) to be vertically aligned.
I have also tried using display:table-cell and it works great in all ways, however I do not have the ability to set the cell width as a fixed %, and I need to add html markup which seems to limit me in using certain media queries later on.
How can I vertically align text using inline-block?
Im having trouble making a fiddle but this is close: http://jsfiddle.net/z4bj14op/
Here is my CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-y: hidden;
font-family: helvetica;
}
#status {
width: 100%;
font-size: 0;
}
#line0, #status0 {
display: inline-block;
width: 50%;
vertical-align: middle;
height: 10%;
}
h2 {
font-size: 18px;
}
#line0 {
background-color: #B36305;
color: white;
}
#status0 {
background-color: black;
color: white;
}
And the HTML
<div id ="status">
<div id="line0"></div>
<div id="status0"></div>
</div>
There is an article from Steven Bradley 6 Methods For Vertical Centering With CSS: http://www.vanseodesign.com/css/vertical-centering/
Which solution would be the best depends on your requirements. I think the Absolute Positioning and Negative Margin way could be the solution you need, as your container have a defined height.
When using display:inline-block;vertical-align:middle the element is only vertically centered to the other inline-elements of the current row.
is this what you want ?
JSfiddle Example
If you want both of the divs to be 100% in their width that impossible ! otherwise the rest of the div will hidden by the other one
clarify more what's needed ..
<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div>
<div id="status0"><h2>Good Service</h2></div>
</div>
css code:
#line0{
background:pink;
width:50%;
display: inline-block;
}
#status0{
background:red;
width:49%;
display: inline-block;
}
Why are you using display: inline-block? must you use this way? try to put float: left instead display: inline-block inside block #line0,#status0 and after you can work with text-something else
You Can try this
#line0{
background:pink;
width:50%;
display: inline-block;
float:left;/*added*/
}
#status0{
background:red;
width:50%;
display: inline-block;
}
DEMO
I have a peculiar question. I have made a div (code for which will be provided below), and I want the entire div (since it is a button) to be a clickable link. The issue I'm having is my div should only be 200x200, yet the think stretches across the entire page horizontally. It should only be a link in that 200x200 portion, but like I said it goes that 200 height across the entire horizontal part of the page making random background images clickable. I've tried setting the divs to block, with no avail. How would I solve this? My code is as follows.
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
<div id="button"></div>
Use display: inline-block;. You could also do this without the <div> at all.
http://jsfiddle.net/SLAfU/
You should do it following way:
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Since anchors cannot contain block elements in HTML 4.01. Therefore you can just make anchor a block element and all will work.
In HTML5 anchors can contain block elements, therefore setting display: block; or display: inline-block; combined with <!DOCTYPE html> should suffice.
Make the anchor tag "display: inline-block"
You need to have an HTML5 doctype to have a div (block level element) inide an anchor tag.
the right way in this case is:
<div id="button"></div>
or
<div id="button" onclick="document.location.href='signup.php'" style="text-decoration:underline"></div>
read w3c specifications! you cant put block element inside inline!!!