This has been bothering me. Although I've resolved my problem using padding for the container to create the desired height of the container, I'm still puzzled on why this happens.
I have a container with two child elements inside, like so:
<div class="container">
<img src="http://placehold.it/30x30" id="first-item"/>
<img src="http://placehold.it/50x50" id="second-item"/>
</div>
I vertical align the children to the container using the below:
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
However, if a fixed height is set for the container, the vertical alignment breaks.
Why is this so?
http://jsfiddle.net/Nx8Jc/
It will work if you add a line-height property with an identical value to the height:
.container {
background-color: #EADDBB;
height: 100px;
line-height: 100px;
width: 100%;
padding: 20px 20px;
}
#first-item, #second-item {
display: inline-block;
vertical-align: middle;
}
Demo: http://jsfiddle.net/galengidman/Nx8Jc/1/
Related
I can't find a way to do this
There seems to be padding placed above and below the element, although I have set it zero
https://plnkr.co/edit/WvEqNCxEcLY5yS1IT738?p=preview
<div>
<button>hello</button>
</div>
<table><tr><td>
<button>hiya</button>
</td></tr></table>
td,
div{
padding: 0;
height: 10em;
border: solid;
}
button {
height: 100%;
width:100%;
border:solid 10px #f00;
}
I don't want to use absolute position as the contents vary, and JS would be an overhead I couldn't live with!
Is there a known bug here? Would anyone have a link to it so I can watch it not get fixed for years and drives me to a stress related end
Thanks in advance
ios pic
chrome on win 10 (desired result)
Thebutton, input, textarea, img, video, audio etc. are REPLACED ELEMENTS. The positioning rules for them are other than for standard elements. You can try to enclose replaced elements into a span or div.
Add <div/> inside <td/> and put <button/> into <div/> it will work properly. Add styles to new <div/> element and use:
button
{
height: 100%;
width:100%;
padding:0;
margin:0;
}
<table><tr><td><div class="replaced-element-container"><button>hiya</button></div></td></tr></table>
Well, this is embarrassing but it meets W3C requirements.
For one table cell in the row:
td, div
{
padding: 0;
height: 10em;
border: solid;
display:block;
}
button
{
height: 100%;
width:100%;
border:solid 10px #f00;
}
But it doesn't resolve problem that button is replaced element. It is still in container made from <td/> element.
I have one div containing an image and a translucent window over it that is draggable and resizable. I am using the parent div as the containment parameter for the respective jQuery UI interactions. But when I resize the window, I can only resize it to 10px less than the parent width. No matter which image I use. No issues resizing to the full height. No issues dragging to the far right or bottom.
Here is the code (Try it here - JS Fiddle)
HTML:
<div id="container">
<div id="navi">
<img src="http://www.mountainevolution.com/Cento%20Fonti/images/dscn7587.jpg" />
</div>
<div id="infoi">
</div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
position: relative;
}
#infoi {
position: absolute;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 1px navy;
width: 100px;
height: 100px;
opacity: 0.5;
}
#navi {
padding: 0px;
position: absolute;
}
#navi img {
display: block;
}
JS:
$("#infoi").draggable({
containment: "#navi"
});
$("#infoi").resizable({
containment: "#navi"
});
I have played around with margins and padding, and also looked at other questions on StackOverflow. None of them are similar to mine. There are some questions on problems with using resizable and draggable together. In my case, removing draggable does not affect the issue, so I don't think it is a problem with using them together.
I have three lines of text I want to space evenly near a box of height=100px; (an image actually)
Is there anything I can do that will do this automagically? Or do I have to calculate line heights and change the paddings margins line heights and font sizes?
My solution involves the height of the element containing your lines of text. Since your block is 100px, you want the block containing the text to also be 100px. It could also be three separate blocks that add up to 100px.
Here are two separate solutions that both work.
HTML:
<div class="box1">box1</div>
<p class="p1">This is line 1.<br>
This is line 2.<br>
This is line 3.</p>
CSS:
.p1 {
margin: 0;
padding: 0;
height: 100px;
line-height: 33px;
background-color: silver;
}
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
HTML:
<div class="box2">box2</div>
<p class="p2">This is line 1.</p>
<p class="p3">This is line 2.</p>
<p class="p4">This is line 3.</p>
CSS:
.p2, .p3, .p4 {
margin: 0;
padding: 0;
height: 33.3px;
line-height: 33.3px;
background-color: silver;
}
.box2 {
background-color: green;
width: 100px;
height: 100px;
float: left;
}
Demo at CodePen
In the second solution (separate blocks), you can leave out the line-height and the first line of text will align with the top of the box with the other lines spaced evenly below it.
You could apply a line-height that is one-third the image height.
img {
height: 100px;
vertical-align: middle;
}
.text {
vertical-align: middle;
display: inline-block;
max-width: 300px;
line-height: 33.33px;
}
http://jsfiddle.net/myajouri/Nk5Hj/
Simply put the question is - is there a way to align link text within an action link vertically?
I need to make a button-looking Html.ActionLink control.
There is a reasonably good example at Html.ActionLink as a button or an image, not a link
I have implemented this approach, however, I need not just an "image" button,
but an image button with a text shown on it, and this text depends on view model's state, so that I cannot simply put it on an image.
Here is what I have (Razor):
#Html.ActionLink(#commitee.Name, "CommiteePage", "SecureFolder",
new { commiteeName = commitee.Name, page = 1 },
new { #class = "commiteeButton" })
and CSS:
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
}
The result is OK, but: the text of a link is located on the top of an image, and not in its middle (vertically).
I do not know how to center link text vertically, so that it can be located right in the center of an image.
Of course, there can be another approach (see below) but maybe it is still possible with approach mentioned above?
<a class="nonunderlinedlink" href="#Url.Action("CommiteePage", "SecureFolder", new { commiteeName=commitee.Name, page = 1 }, null)">
<div class="commiteeButton">
<p class="pstyle">#commitee.Name</p>
</div>
</a>
Try the following changes in your css
a.commiteeButton {
background: transparent url("../Images/BlueButton.png") no-repeat top left;
display: block;
width: 304px;
height: 50px;
color: white;
text-decoration: none;
font: normal 14px Arial;
text-align: center;
margin-bottom: 10px;
display: table-cell;
vertical-align: middle;
}
Rex (see comments to my question above) suggested putting padding-top to CSS, that has resolved issue without causing collateral layout problems.
Thank you all for your quick reply!
I know it's a bit late but you could also use line-height: 50px; to center your text vertically
I have been working on building my first CSS site using divs and am having an issue with a button. While I am able to get the button to work on rollover, the link does not respond. Can somebody please advise. Thank you.
HTML:
<div class="wrapArrow">
<div class="arrow" style="cursor: pointer;"><span>home</span></div>
</div><!-- END wrapArrow -->
CSS:
.wrapArrow {
margin: 70px 0 0 0;
padding: 0;
width: 20px;
height: 20px;
float: right;
}
.arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(../images/nav/arrows.gif);
background-repeat: no-repeat;
}
.arrow:hover {
background-position: 0 -20px; }
.arrow span {
display: none; }
Since your <span> is not displayed, your link has no content, so it gets collapsed to a width and height of 0, thus making it unclickable.
Why not just make the anchor itself have the arrow class?
<div class="wrapArrow">
<span>home</span>
</div><!-- END wrapArrow -->
.arrow a is 0 x 0 px
Makes it really hard to click. Believe me I tried.
Try:
.arrow a {
width: 100%;
height: 100%;
display: block;
}
It looks like you need to get rid of
.arrow span {
display: none;
}
Is there any reason that needs to be there? With display set to none you are hiding the clickable element that is necessary for the link to work.