I have a Button that is a simple anchor tag styled with the following -
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
padding-top:4px;
width:97px;
height:28px;
margin-top:14px;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
padding-top:12px;
text-shadow:none!important;
}
I'm having problems vertically centering the text within the button, it appears fine in some devices, but off centre in others.
Can anybody recommend a way to fix this or a better solution to achieve the same result?
Cheers
Use line-height to center it vertically. I usually use the same value as its height.
HTML:
<div class="buyBtn">Button</div>
CSS:
.buyBtn{
background:url(../images/buyBtn.png) no-repeat;
width:97px;
height:28px;
display: table-cell;
vertical-align: middle;
}
.buyBtn a{
color:#fff!important;
font-weight:normal!important;
text-decoration:none;
padding-left:27px;
text-shadow:none!important;
}
No need to use padding-top or margin-top for vertical align. Just use display: table-cell; and vertical-align: middle;. Thats it.
Flexbox helped me nail it. Assume you have an excel button (an anchor tag, really).
HTML
<a class="btn-excel" href="/Export/ExportListToExcel">
Export To Excel
</a>
CSS
.btn-excel {
background-color: #32CD32; /*lime green*/
color: #fff;
outline: none;
border-radius: 0.3rem;
text-decoration: none;
width: 5rem;
height: 2.5rem;
/* Flex rules 'em all */
display: flex;
justify-content: center;
align-items: center;
}
.btn-excel:hover {
background-color: #808000; /*olive*/
cursor: pointer;
text-decoration: none;
}
I would use line-height as bchhun as mentioned. Also, padding-top & padding-bottom can help.
You can copy this code and put it as a CSS and adjust the things as you need
.btn-alignment{
width: 88px;
height: 40px;
margin: 0 auto;
padding: 0;
display: inline-block;
line-height: 40px;
margin-top: 9px;
text-align: center;
}
Did you try setting a font-size to your link ? Each browser probably has its own default size, so that may be an hint. Be careful too with padding and width/height, you need to decrease the block size if you add padding 'cause the padding is included in the width. For example, a simple block of 100px width without padding will have a size of 100px : ok. Add a padding-left: 10px; and your block now has a width of 110px. ;)
Related
I want to give space between span and div which is as follow
<span class="headingUserName">JAVA MAN</span>
<div class="home-middle">
Content
</div>
in My external css file
.headingUserName{
font-size: 24px;
margin-bottom: 10px;
}
this is not providing space between div and span.How to resolve this.
try this
<style>
.headingUserName{
font-size: 24px;
}
.home-middle
{
margin-top: 10px;
}
</style>
Setting the display to block will surely do what you are looking for. But it also will make your span element to cover all the width, because block elements has by default a 100% width.
If you don't want this, you can use inline-block instead. Your element stays with an automatic width but you can set it to have margins as in block elements.
.headingUserName{
display: inline-block;
margin-bottom: 10px;
}
Add display: block to the span styling
DEMO http://jsfiddle.net/kevinPHPkevin/Ep8G8/
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
This should work
.home-middle
{
margin-top:10px;
}
JS Fiddle Demo
or as Vector's Solution
.headingUserName {
font-size: 24px;
margin-bottom: 10px;
display:block;
}
If you really wanted the Span to provide the spacing, for some reason, you would have to set its display property to block, like this:
.headingUserName{
font-size: 24px;
margin-bottom: 20px;
display: block;
<div class="titelcontent">
<div class="name">Name</div>
<div class="hzline"></div>
</div>
I want name div and hzline div to auto fit 100% in titelcontent.
The label (for example, Name) will vary in length and I want the red underline to span the remainding space of the titlecontent div.
How do I achieve the following? It is easy to do this using tables but I can't figure out how to do this via span or div.
You can use div like a table by using table-cell.
.titlecontent {
display: table;
}
.name {
display: table-cell;
white-space: nowrap;
}
.hzline {
display: table-cell;
border-bottom: 3px solid red;
width: 100%;
}
See DEMO.
Updated to allow background images to show through
You can make the mark-up a bit tighter by using a pseudo-element as follows:
<div class="wrapper">
<div class="inner">Photoshop</div>
</div>
and use the following CSS styling:
div.wrapper {
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
line-height: 180%;
background: red url(http://placekitten.com/1000/500) no-repeat left top;
overflow: hidden;
}
div.inner {
position: relative;
display: inner;
color: yellow;
padding-right: 0.50em;
border: 1px dotted yellow;
}
div.inner:after {
content: "\A0";
position: absolute;
bottom: 0;
left: 100%;
border-bottom: 5px solid #d71d00;
width: 1000%;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/wE8bC/
How It Works
The parent element div.wrapper may contain a background image or be transparent and show the background of some ancestor element. You need to set overflow: hidden.
For the label (<div.inner>), set position: relative and then generate a 100% width pseudo-element with a bottom border to serve as an underline. Use absolute positioning to place div.inner:after to the right of <div.inner> (left: 100%) and make the width relatively large. The pseudo-element will trigger an overflow condition but this is taken care of by hiding the overflow in the parent element. You can control left/right spacing using padding.
You can use set the display property to either inline or inline-block. If you use display: inline, it will work in IE7; adjust the line height as needed for styling.
Note that the generated content is a non-breaking space, hex code "\A0".
Support for IE7
If you need to support IE7, you will need a hack if you use inline-block as discussed in a previous question: IE7 does not understand display: inline-block
IE7 also does not support table-cell so some of the other posted solutions will face the same limitation.
Or an alternative to using display: table:
.name {
float: left;
}
.line-wrapper {
display: block;
overflow: hidden;
padding-top: 6px;
}
.hzline {
border-bottom: 3px solid red;
width: 100%;
}
See example.
I've guessed you are looking something like this. Please find my solution based on my understanding about the image you posted.
HTML
<div>
<span>Photoshop</span>
</div>
<div>
<span>Adobe Illustrator</span>
</div>
<div>
<span>3D Max</span>
</div>
<div>
<span>Maya</span>
</div>
<div>
<span>Windows 8 Pro</span>
</div>
CSS
div {
line-height: 150%;
border-bottom: 5px solid #d71d00;
}
div span{
position:relative;
bottom: -10px;
background:#fff;
padding: 0 5px;
color:#82439a;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
}
Please do let me know your feedback. Thanks
HTML
<div class="leave-comment">
<span class="comment-bubble"></span>Leave a comment for Example Video 8!
</div>
CSS
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
}
Here is the JS Fiddle: http://jsfiddle.net/CeZLy/
I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can't set a fixed width on the a element. Can someone help me out with this?
NOTE: Sorry if I wasn't clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.
Remove the span. Set the image as the background of the a element. Use text-align:center; and add left-padding for the image:
.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align:center;
}
.leave-comment a {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}
<div class="leave-comment">
Leave a comment for Example Video 8!
</div>
Check it:
http://jsfiddle.net/C9HKr/
From your comments, I would just leave out the float: left and add a text-align: center
JSFiddle
Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.
See JSFiddle
There's a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.
Update:
I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.
See this JSFiddle
.leave-comment {
background-color: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}
Well you need the span now.
http://jsfiddle.net/CeZLy/7/ in action
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.
I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html
For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?
.navcontainer-top li {
font-family: "Verdana", sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
text-align: center;
display: inline;
list-style-type: none;<br>
width: 117px;
height: 26px;
}
.navcontainer-top li a {
background: url("../images/nav-button.png") no-repeat;
color: #FFFFFF;
text-decoration: none;
width: 117px;
height: 26px;
margin-left: 2px;
margin-right: 2px;
}
.navcontainer-top li a:hover {
background: url("../images/nav-button-hover.png") no-repeat;
color: #dedede;
}
Declare the a element as display: inline-block and drop the width and height from the li element.
Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.
The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.
Use line-height to control the text's Y-position inside the element.
Inline items cannot have a width. You have to use display: block or display:inline-block, but the latter is not supported everywhere.
I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.
Using width/height on inline elements is not always a good idea.
You can use display: inline-block instead
Remove the <br> from the .navcontainer-top li styles.
I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me :
.navcontainer-top li
{
display: inline-block;
background: url("../images/nav-button.png") no-repeat;
width: 117px;
height: 26px;
}