I am trying to auto center text from top to bottom and from left to right, in other words text needs to be in a center of the image. The only thing i can change is css, the code tags are hard coded, so it can't be changed.
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>
<code>message goes here</code>
You need to set the display to block for the <code>, which is an inline element, so that width and height apply, and better do it the automatic centering way instead of hardcoding any padding sizes:
Sample in http://jsfiddle.net/bx852/7/
<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}
.notice { font-size: 50px }
</style>
<code>message goes here</code>
<code class='notice'>hi joe</code>
result:
If you know the dimensions of the image make the width the width of the image, align the text to center, make the height half the image and set the top padding to half as well. Should do the trick
code {
background:url("images/bkg.png");
width: 400px;
height: 200px;
text-aling: center;
padding-top: 200px;
}
To horizontally and vertically center text, I would set text-align: center to horizontally align. Then, I would set line-height in pixels until it vertically aligns center. Usually, this is double the font size, but it would depend on your padding and height set.
try this instead,
code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}
hope you get your answer..
i can try this too,
<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>
Related
I just want align the background with my div where I have the text.
I have this code: (Please, resize the window for see the effect)
http://jsfiddle.net/BcqLK/
.texto1Home{
width: 48.1%;
color: #58585A;
font-weight: 700;
line-height: 100%;
text-align: center;
float: left;
border: solid 1px red;
position: absolute;
display: inline-block;
top: 13.75%;
left: 25.75%
}
And I want this result: (is an image)
http://jsfiddle.net/qYVL4/
Try this out:
[EDIT] http://jsfiddle.net/BcqLK/6/
Basically you annotate the container with:
position:relative
After that position the rest of the content with an absolute positioning inside the container. Also I didn't use % but pixels for the positioning. Also it is important to set static image size, otherwise you should really use % or something like that for the alignment.
Regards
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
How do you align a background icon image if the text is center-aligned? Like a small icon before the text. If it's not center-aligned, I can use something like:
p {
background: url(image.jpg) no-repeat 0 0;
padding-left: 40px;
}
But if I center align it like so:
p {
background: url(image.jpg) no-repeat 0 0;
padding-left: 40px;
text-align: center;
}
The background remains on the left corner while the text is centered (so there's a huge gap in between them). It's possible to use background position, however, if the screen is of a different size than what I use, the background will be overlapped by the text.
You can check the jsFiddle demo:
http://jsfiddle.net/PvL3T/2/
:first-letter pseudo element will play around good, http://jsfiddle.net/PvL3T/7/
p {
padding-left: 40px;
text-align: center;
}
.resize:first-letter {
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px;
}
this will work even into IE6 if you care, but only if there is white space between selector and opening curve bracket. Only for IE6 something like this p:first-letter{... will not work, but p:first-letter {... will
and just in similar way, you may use :first-line
If you're looking to have the icon float inline next to the text, you might want to consider placing it inside the parent tag. Then the background image can float alongside the text regardless of screen size:
http://jsfiddle.net/PvL3T/4/
HTML:
<p><i class="icon"></i>This is a text that is center aligned.</p>
CSS:
p {
text-align: center;
}
p .icon {
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 0;
width: 12px;
height: 12px;
display: inline-block;
margin-right: 10px;
}
You need to add an line-block displayed element before your text. So it can go with your text content. Example: http://jsfiddle.net/PvL3T/5/
.icon
{
background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat center center;
width: 1em;
height: 1em;
display: inline-block;
}
Try:
background: url(image.jpg) no-repeat center;
or alternatively:
background-position: center;
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
Please see below the code i have. I am trying to align the name with the image in a way that the name is centered on the right side of the image. I haven't been able to do it correctly. I tried adding position: absolute; but that still won't do the trick.
<div id="contain">
<div id="baseline">
<div id="title2">
<img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
</div>
CSS:
#contain {
width: 770px;
min-height: 170px;
margin: 20px auto 60px auto;
color: #222222;
font-size: 15px;
position: relative;
}
#baseline {
color: #999;
}
#title2 {
color: #000;
font-size: 30px;
margin-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
width: 750px;
}
Float both left and adjust the title with margin to center it.
http://jsfiddle.net/FBj3f/
If you know the height of the image you can set the line-height of the title resulting in a vertical centerd title http://jsfiddle.net/BtPwh/1/
If you're not against using a table then you can automatically ( Don't need image height. ) do it like this: http://jsfiddle.net/tLggp/1/
The easiest way is to set use a background-image instead of an image element. Then you can right-align text in that block, resulting in top-right positioning.