Can't center text vertically with a link, this is my html code:
<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
<p style="">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
I've tried to specify vertical align, to p tag, also tried line-height, but no success, link still is out of position.
jsfiddle : http://jsfiddle.net/85q6wqjx/
You can realize this layout as follows.
First, set display: inline-block to the p, that way you can align it with
the baseline of the content box.
Second, you need to reset the line-height within p to some reasonable
value to get the line spacing to look right.
Third, apply vertical-align: middle to the p element for it to have the
desired effect.
This approach will work with any number of text lines, as demonstrated.
See fiddle: http://jsfiddle.net/audetwebdesign/1mwkbr0q/
.panel {
background:#F7C0B9;
width:645px;
height:170px;
margin:0 auto;
outline:1px solid #FFF;
text-align:center;
line-height: 170px;
}
.panel p {
vertical-align: middle;
display: inline-block;
border: 1px dotted gray;
line-height: 1.25;
}
<div class="panel">
<p>Text<br /> Link<br>a 3rd line for example</p>
</div>
If you want the Link under the text but still both in middle:
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align:center;vertical-align: middle;">
<p style="display:inline-block;">
Text <br />
<a href="#">
Link
</a>
</p>
</div>
JsFiddle
Your line-height was pushing it outside the div and the p being a block element was stopping it from going under. You needed to make p an inline-block element.
If you want them both on the same line, remove <br> from the html.
JsFiddle
br is a line break and line-height effects by that.
Please remove <br> tag you will get what you want
and update your code snippet with
<div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
<p style="margin: 0;">Text</p>
Link
</div>
http://jsfiddle.net/85q6wqjx/10/
Just add following code to your css file
a {
margin-top: -8%;
display: block;
}
give class/id name to anchor tag if you want to add style particular anchor tag
Related
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go.
Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a></p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
</body>
</html>
And here's the CSS for it:
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 20px 0 -30px 0;}
I've tried a lot of things in the CSS that aren't working. I want the button to be a few inches below the "Join today!" text but it stays where it's at, like a hair below the text when I want there to be space in between the text and the button. Any idea what I'm doing wrong? And again I'm new to all this so I appreciate your understanding. Thank you.
You have to add display:inline-block; or block to the .btn-two since anchor elements are display:inline by default and margin/padding can't affect em
Check the snippet below
.btn-two {
border: 1px solid black;
padding: 20px;
text-decoration: none;
background-color: black;
color: white;
text-align: center;
margin: 60px 0 0 0;
display: inline-block;
}
I am fairly new to web development so I apologize if this is a "newbie" question, I've looked on various sites and tried various things but am not able to move a button on my page to where I want it to go. Here's the code I have for it in HTML:
<div class="crown">
<div class="container">
<img src="http://www.clker.com/cliparts/3/8/d/6/12205466202120645650portablejim_Chess_tile_-_King_1.svg.med.png" height="250" width="200">
<h3><strong>Join today!</strong></h3>
<p style="text-align: center;"><a class="btn-two" href="#">Register</a>
</p>
</div>
</div>
<section class="footer">
<div class="container">
<p>© 2016</p>
</div>
</div>
You can also remove text-align:center; style from the <p> that contains the button.
Working fiddle: https://jsfiddle.net/L210zqvf/
Apply display: inline-block; to your .btn-two. An <a> tag is an inline element, generally not accepting width, height, margins etc. as long you don't do the above.
Yeah, and if you don't want it to be centered, remove style="text-align: center;" from your <p> Tag.
Anchor a elements are display:inline by default in a browser. Inline level elements can't have margin or padding, top or bottom. You can only apply margin and padding to the left or right of an element.
In your case. I'd put a class on the containing paragraph element and add margin to the top of that. Paragraph elements are block level elements.
Please check the below link :
http://example.com/1/23.php
Here I am trying to align the span text eg Messages and photos such that it should appear in the middle wrt the icon.
Any help will be highly useful
Below is the code :
<div style="padding-left:20px">
<img src="icons/trophy1.png" > <span style="display:inline-block;padding- bottom:5px;"> Messages</span>
<br>
<img src="icons/trophy1.png" > <span style="display:inline-block;padding-bottom:5px">Photos</span>
</div>
You could achieve this by setting the icon as the background of the span and change the line-height to the height of your icon.
span.trophy {
background: url(icons/trophy1.png) no-repeat 5px 3px;
height: 32px;
text-indent: 30px;
line-height: 32px;
}
You can use a DIV element to achieve this.
You should use the CSS text-align property on the container.
<div style="text-align: center;">
<img src="icons/trophy1.png" >
<span style="display:inline-block;padding-bottom:5px;"> Messages</span>
</div>
I have a collection of divs as rows that can be variable width as they are inside a resizable container. The div contains 4 groups of elements that I want to be displayed side by side. Of these 4 groups, 2 of the groups need to be variable width while the other 2 are fixed. I have it mostly working except the last group isn't wrapping the way I want it to. I can't put a margin-left on it because of the variable width sibling. I also tried setting each item as inline-block but that forced the last group to have a strange calculated width that was larger than the available space and always forced it below the other 3 groups.
Here's a live example/fiddle and the source is as follows:
HMTL:
<div class="row level-2 note subtype-new subtype-fancy">
<div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div>
<div class="padded">
<div class="status-icon-wrapper col">
<span class="new-icon icon"></span>
<span class="modified-icon icon" title="Revised Code"></span>
</div>
<div class="codes-wrapper col">
<span class="codes">XYZ</span>
</div>
<div class="icon-wrapper col">
<span class="fancy-icon icon"></span>
<span class="plain-icon icon"></span>
<span class="disabled-icon icon"></span>
</div>
<div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div>
</div>
</div>
CSS:
.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000}
.col {float: left}
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:}
.level-1 .padded {padding-left: 30px}
.level-2 .padded {padding-left: 60px}
.codes-wrapper,
.icon-wrapper {padding-right: 3px}
.status-icon-wrapper,
.icon-wrapper {width: 17px}
.row .icon {display:none}
.note-icon {background-color: #F0F}
.fancy-icon {background-color: #CC0}
.plain-icon {background-color: #C00}
.new-icon {background-color: #0CC}
.note .note-icon,
.subtype-new .new-icon,
.subtype-modified .modified-icon,
.subtype-fancy .fancy-icon,
.subtype-plain .plain-icon,
.subtype-disabled .disabled-icon
{display: inline-block}
.description {
overflow:hidden;
}
jsFiddled here
http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
hidden : This value indicates that the content is clipped ...
If I understand the question correctly you should add:
.description{
overflow:hidden;
}
to your CSS
I am not exactly sure why the text does not center in the title class span.
<div id="vid_display">
<span class="title">SampleText</span></br>
<span class="desc">Sample Desc</span>
</div>
Stylesheet
#vid_display {
height: 500px;
width: 700px;
box-shadow: 10px 10px 5px #888;
}
.title {
font-family: cursive;
font-size: 20px;
font-style: bold;
text-align: center;
}
text-align doesn't have any effect on inline elements like span tags. You need to apply your text-alignment onto the parent element that is display:block; like the <div> or <p> that is wrapping the span.
You might be better off with something like this:
HTML
<div id="vid_display">
<p class="title">SampleText</p>
<p class="desc">Sample Desc</p>
</div>
CSS
.title { text-align: center; }
Update: Here is a working sample: http://codepen.io/anon/pen/jEnys
is an inline element and not a block. Use div instead:
<div id="vid_display">
<div class="title">SampleText</div><br>
<span class="desc">Sample Desc</span>
</div>
Use
<div class="title">SampleText</div></br>
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
<span> defaults to being display:inline; whereas <div> defaults to being display:block;.
I have following HTML output which i can not change. These are just two links, one of them is text link, while other is the image.
The problem is that the image is appearing bit higher position than the text. I am trying to align the text in the middle of the image but not getting any success.
I have tried setting the padding-top, margin-top and vertical-align to the image, but none of them seem to work. I'll appriciate any help.
HTML:
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
JSFiddle:
http://jsfiddle.net/e3vnQ/
Try using display: inline-block and vertical-align: middle: http://jsfiddle.net/e3vnQ/7/
add align="top"
<p>
<a href="#" class="link">
<img width="14" height="14" src="http://i50.tinypic.com/f08ehe.jpg" align="top">
</a>
my title
</p>
CSS:
.link img{
margin-top: 5px;
}
you can write the css like this :-
when anchor tag will come in p tag will stay vertical-align:middle; through mentioned below css
p{
font-size: 12px;
border: 1px solid red;
}
p a {
display:inline-block;
vertical-align:middle;
}
.link img{
margin-top: 5px;
}
or see the demo :- http://jsfiddle.net/e3vnQ/13/