I have an anchor element that looks like this
<img src="imgurl"/>Text
I would like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text.
Vertical align only really applies to sibling elements. This should work:
<img scr="imgurl"/><span>Text</span>
With CSS:
a img, a span { vertical-align: middle; }
How do you mean "vertically align"? Should they be next to each other, or on top of? In case of next to each other, should the text be aligned with the top, center or bottom of the image?
If your problem is that they are displayed on top of each other instead of next to, add the following to your css:
a img { display: inline; }
If your problem is the opposite, add this:
a img { display: block; clear: both; }
and see if that helps.
The Proper Way to Align Images and Icons with Anchor Tags is
In your css
a {
background: transparent url(/images/your_image) scroll no-repeat left center;
padding: 2px 0px 2px 20px; //fit as you need
}
In your HTML
Text
Related
I have an h1 and I want to put a border around the inner text only. The problem is that the border will naturally fill the entire block which means it covers the length of the page.
I can't turn it into a span because I need the text to be horizontally centered in the middle of the page.
How do I get the border to only wrap the text?
Simply give the element a display of inline-block, and apply text-align: center on the parent:
h1 {
display: inline-block;
border: 1px solid black;
}
div {
text-align: center;
}
<div>
<h1>Title</h1>
</div>
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
so I'm messing around with jsfiddle..
http://jsfiddle.net/3mfnckuv/3/
For those of you who play Destiny, this is Destiny inspired haha..
but anyway, a few questions :)
1) Why is there the white space underneath the image?
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
3) How can I move the description div, higher and align it with the top edge of the picture?
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
5) Is it a good practice to set width and height to 100% on the body and html?
<ul class="test-2">
<li>
<div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
<p>Invective</p>
</li>
</ul>
html, body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
.image, p {
display: inline-block;
border: 1px solid black;
}
Thanks guys
1) Why is there the white space underneath the image?
The default vertical-align of your image is baseline by default. Change it to top, bottom, or middle to get rid of the white space.
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
Sure. White space in your HTML between the image and the text will be rendered as white space on your page when using display: inline or display: inline-block. With float: left, the white space is collapsed.
3) How can I move the description div, higher and align it with the top edge of the picture?
Set the vertical-align: top on the element containing the text.
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
No. That white space is an actual space character. Collapse it using float: left or remove it from your html.
5) Is it a good practice to set width and height to 100% on the body and html?
Maybe. Won't hurt. This was a trick that helped columns fill the page. Today we can just set min-height: 100vh instead. The vh and vw units, representing view height and view width, respectively, are very handy.
Here I think I fixed your problems. Try this out. You needed to make your image class in the img tag. Also I put your p tag inside the same div as the image.
Here is CSS
body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
p {
position: absolute;
top: -1px;
left: 110px;
}
.image {
display: inline-block;
border: 1px solid black;
}
Here is the div in HTML
<div><img class="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"><p>Invective</p></div>
Also when using css you don't have to put html for the body just body will do fine.
For my html code I am trying to inline my text and put it in the center, what's wrong?
div.wrapper a {
display: inline;
text-align: center;
text-decoration: none;
color: #808080;
}
You dont put the text-align on the text element itself.
If you have the structure like this:
.wrapper and inside an <a> or <p> element. than you put the text align: center on the div so everything center inside this div.
Example: http://jsfiddle.net/q0ouh6b9/
.wrapper {
text-align: center;
}
You can do the following:
div.wrapper a {
// All other properties
vertical-align: middle;
}
When you set the anchor element to inline, it will not extend the full width of its element. To do what you want, apply text-align:center to the div element, or set the anchor to display:block; with a width of 100%.
The first will make all text inside the div centered while the second makes the text take up the full width and centers it within its own block.
I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.
I am trying to centre an anchor element within a div element both horizontally and vertically. The basis for this question is as follow.
<div></div>
<div></div>
<div>
Hello
</div>
<div></div>
<div></div>
div {
width: 100px;
height: 100px;
background-color: teal;
box-sizing: border-box;
margin: 10px;
float: left;
text-align: center;
display: table-cell;
vertical-align: middle;
}
a {
color: white;
text-decoration: none;
font-style: 14px;
}
Now, I know that I can use text-align: center; on the containing div to centre the anchor element horizontally and that I can use display: table-cell; vertical-align: middle; on the div to align it vertically but it doesn't seem to work together, especially when the div is set to float left.
How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.
I would prefer not to use line-height since it breaks with multi-line text.
http://jsfiddle.net/xHLze/2/
You basically listed the answer in your question, though you may just need to apply the styles to a few different places:
I put display: table; on the containing <div>, allowing me to set display: table-cell; on the <a> element, after which I can apply vertical-align: middle; to vertically center the text.
I then applied text-align: center; to the <a> element to horizontally center it.
http://jsfiddle.net/3RfgD/
What I believe you missed is that you should be setting display: table; on the table-cell elements parent in order for it to work properly. (an element cannot act as the cell of a table if it is not in a table, whether it's an actual table or a CSS one)
Use margin for your anchor tag to auto align it in the center of your div tag like this:
a{margin:0 auto;}
This automatically centralizes your text both vertically and horizontally. :) but since anchor tag is inline tag we need to specify it with respect to the div tag like this
div a {display:block;
width:50px;}
where 50px is with respect to div's width. Check out here why margin 0 auto doesn't work