I have this code :
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
margin-top: 20px;
}
<div class="myDiv">
<a class="myLink" href="javascript:void(0)">Ciao</a>
</div>
if I increase the margin-top I'd aspect that the div becomes more hight (and the go to the bottom of the div), but in fact this doesnt happens! The same with padding-top (it go out of the div...). It doesnt listen the container!
Why? And how can I fix this trouble?
EDIT
in fact what Id like to do is align an input box and a image, you can see the example here :
<div>
<input type="text" />
<a style="margin-top:10px; margin-left:5px;" href="#">
<img alt="Cerca" src="/private_images/home_button_right.png">
</a>
</div>
Change to:
.myLink
{
background-color: red;
padding-top: 100px;
display: inline-block;
}
or
div {
padding-top: 100px;
}
depending on what you want to achieve.
Based on your update of the question:
Updated Demo fiddle.
CSS:
input,
img {
vertical-align: middle;
}
Or use vertical-align: top; to align the tops.
Do the opposite thing:
.myDiv
{
background-color: blue;
padding-bottom: 20px;
}
.myLink
{
background-color: red;
}
Add display: block; or maybe even better: display: inline-block;. Block elements can have height. Inline elements not.
You might also consider to give the anchor a larger line-height (e.g. line-height: 2em;), but that only works for single-line text.
.myDiv
{
background-color: blue;
}
.myLink
{
background-color: red;
display:list-item;
}
You can use display:list-item; to solve this problem
Related
I'm trying to put some images to my website which will work as a hyperlink to another part of my page. The thing is that when I use the <a> tag and the <img> tag, the <a> tag overextends the <img> on its left side making clickable a part of an area that i don't wish to be clickable. I want to keep the <a> tag in the limits of the <img>.
This is my code: (sorry but since I'm new to all this, i don't know how to post it in any other way)
.firstproject {
height: 100px;
width: 100px;
background-color: red;
margin-left: 100px;
}
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="front.jpg"></a></p>
Hope you can figure it out!
PS: I used red background so the area would be visible and see better its extend.
PS2: I used the "youtube" address as an example of the link
What I did is simply remove the margin-left: -100px;. I do not know what the reason for this margin is, but if this is important for your code please let me know and ill adjust my awnser.
If you want to move the image more to the right you can use the following css:
position:relative;
left:25px;
See CSS - Position for more information.
.firstproject {
background-color: red;
width:100px;
height:100px;
}
.Secondproject{
background-color: red;
width:100px;
height:100px;
position:relative;
left:50px;
}
<p>
<a class="firstproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>
<p>
<a class="Secondproject" href="https://www.youtube.com/"><img class="firstproject" src="front.jpg"></a>
</p>
It's because of the margin on your img element and a. You can change the margin of the a element to 200px and remove it from the img to get the same result without an a the goes out of bounds.
Also you don't need to set a width and height to the a. It's adjusting it's size to the content.
.firstproject-img {
height: 100px;
width: 100px;
background-color: blue;
}
.firstproject-a {
background-color: red;
margin-left: 200px;
}
<p>
<a class="firstproject-a" href="https://www.youtube.com/">
<img class="firstproject-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</p>
You can apply display: inline-block to your a tag and that will give you the expected result.
To contain the image within a tag set images width to 100%
.firstproject {
height: 100px;
width: 100px;
background-color: red;
display: inline-block;
}
.firstproject > img {
width: 100%'
}
p {padding-left: 100px;}
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="front.jpg"></a></p>
Edit:
To push the a to right you could add padding-left to the parent of it
p {
padding-left: 100px;
}
To limit the size of the a tag to the extent of the defined class I'm adding display: block to make sure the height/width is being applied(display: inline-block would work too).
I have two examples in the link below, one that leaves your margin and one that keeps it, as I'm not sure of what you was looking for.
https://jsbin.com/gahunohebu/edit?html,css,output
HTML:
<p><a class="firstproject" href="https://www.youtube.com/"><img
class="firstproject" src="http://via.placeholder.com/350x150"></a></p>
<p><a class="secondproject" href="https://www.youtube.com/"><img
class="secondproject" src="http://via.placeholder.com/350x150"></a></p>
CSS:
.firstproject {
height: 100px;
width: 100px;
background-color: red;
margin-left: 100px;
display: block;
}
.secondproject {
height: 100px;
width: 100px;
background-color: red;
display: block;
}
You can read more about CSS display at CSS Tricks: https://css-tricks.com/almanac/properties/d/display/
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
I have the following CSS Code:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
In my HTML file, I call the following.
<div class="blackbox">
10
</div>
<img src="icon-local.png">
<img src="icon-national.png">
How can I keep the box that is rendered via CSS call and the images called via img tag on the same horizontal line?
The goal is to create something that looks similar to this, but with the CSS box in front of the other icons. Example Image: Example Image
Thanks in advance!
Ken
You can use display:inline-block or display:table.
<div class="parent">
<div class="blackbox">10</div>
<img src="icon-local.png" />
<img src="icon-national.png" />
</div>
And the css
.parent div, .parent img {
display:inline-block;
*display:inline; /* IE7 hack */
zoom:1 /* IE7 */
vertical-align:middle;
}
Make your blackbox class inline or inline-block:
.blackbox {
display:inline-block;
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
The default display for <div> elements are "block" (that is, it adds a line break before and after it) so you could just use:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
display: inline;
}
Notice the display: inline;
Also, display: inline-block; is also useful in many scenarios.
You need to define the div as display:inline-block and float your images to the left so that you have the same result as your example image. Floating your images can be avoided if you change your HTML and have the images before the div. See this demo: http://jsfiddle.net/G5Q4k/1/
I went through so many things about this. But still could not find any solution.
In every solution some restrictions are there. Can anyone provide a generalized and easiet css code for my problem to put a html link button vertically center inside an div?
As below in the image, the create an account button is at the middle of the div google header-bar :)
You need to set line-height the same like height, and also display: inline-block
Here is a fiddle.
If you are using sass, then it is easy to write a mixin (in sass format):
=button($height: 40px)
height: $height
line-height: $height
You can combine display:table-cell and vertical-align:middle
<div style="display:table-cell; vertical-align:middle; height:50px; width:200px; background-color:silver;" >
<a href="#link">
<img src="" />
</a>
</div>
Just set the heights and margins appropriately.
sample fiddle
<div id="a">
<div id="b">bbb</div>
<div id="c">ccc</div>
</div>
#a {
overflow: auto;
background-color: yellow;
height: 100px;
}
#b {
height: 80px;
background-color:red;
width: 50px;
float: left;
margin-top: 10px;
}
#c {
height: 50px;
background-color: blue;
width: 80px;
float: right;
margin-top: 25px;
}
There is this trick I do a lot:
.valign-content:before {
content : '';
display : inline-block;
width : 0; height : 100%;
vertical-align : middle;
}
.valign-content>* {
vertical-align : middle;
display : inline-block;
}
heres the demo: http://jsfiddle.net/pavloschris/5g3Cz/
Does the trick for me...
Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.
You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/
I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/
Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}