I've created a simple strip on which a text content is placed, which looks like image below.
and the CSS for the same is:
.strip {
display: block;
margin: auto;
float: left;
width: 6em;
height: 2em;
background: #090909;
color: white;
font-weight: bold;
text-align: center;
}
Now, what I'm trying to do is to get Text in the middle of the strip, both horizontally and vertically, while text-align: center helps me to attain horizontal centering of text. I can't get the text vertically centered. Note that my mark is plain <div class="strip">12345678</div> and I'm not willing to use any span within that div. And want to keep markup as clean as possible. How can I attain this behaviour?
Thanks.
Add line-height equal to the height of the div. Check this http://jsfiddle.net/VRBrr/2/
line-height:2em;
Related
I'm trying to make this:
I want the purple div to align to the right of the last word on the green div.
i've had some success with display:flex; but the green div won't remove the whitespace from the floated purple div.
.titlebox{
display: flex;
justify-content: center;
text-align:center;
}
.title{
font-size: 55px;
background: green;
}
.subtitle{
position: relative;
float: right;
background: purple;
font-size: 30px;
}
<div class="titlebox">
<div class="title">
THIS IS SOME CENTERED TEXT rertert ert ret erterterter
<br/>
<div class="subtitle">This text is right aligned to the right of the centered text</div>
</div>
</div>
(looks like this:)
I tried position:absolute; right:0; to get rid of the whitespace created by the float, but the purple div sticks to the right of the window instead of the right of the parent div (.title)
I've tried a few other things involving pseudo elements and extra divs, i tried using display:grid; but resizing the window moved the right aligned text from the edge of the centered text (same problem with tables) but I've been at this for a few hours now and it's driving me mad. i can't even remember what i have and haven't tried.
the problem is, if the window is resized to be shorter than the green div's text, often times it would mess up any extra elements background (which i want to fill) as the text div increased size, especially if fixed sizes are used.
Does text-align: right; instead of float: right; on .subtitle give you the result you're after?
.titlebox {
display: flex;
justify-content: center;
text-align:center;
}
.title {
font-size: 55px;
background: green;
}
.subtitle {
text-align: right;
background: purple;
font-size: 30px;
}
Your position: absolute; suggestion is also a workable solution by the way, you however need to make the containing element .titlebox position: relative;
The logo text on my site is for some reason offcentre. I can make it centred again by turning off display: inline-block. However this flattens the spacing around the text and I'm unable to get spacing back above the text (can't do vertical padding for inline elements).
How am I able to centre the text with the background colour? (trying to add text-align: center is automatically scored out in chrome dev tools for some reason?
HTML
<h1 class="logo">
<span class="text logo-title">SomeLogoText</span>
</h1>
less (css)
h1.logo {
font-family: "Roboto Slab", arial, sans-serif;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 15px;
float: left;
a {
color: #fff;
padding: 15px 30px;
display: inline-block;
text-align: center;
line-height: 1.4;
max-width: 155px;
background: #color;
.border-radiuses(0, 4px, 4px, 0);
.transition (color 0.4s ease-in-out);
position: relative;
font-size: 20px;
&:hover {
text-decoration: none;
}
}
.logo-title {
vertical-align: middle;
line-height: 1.6;
}
}
Inline elements ignore width, and also max-width.
Your text simply doesn't fit the max-width: 155px; that you specify in your LESS code.
As soon as you take display: inline-block; off the element, it becomes display: inline; per default and thus ignores your max-width: 155px; and so the element becomes wider to contain the text.
If you have to stick to those 155px all you can do is try to reduce the padding-left and padding-right, e.g. padding: 15px 10px; and see if your text fits then.
What you need is either:
Increase the max-with on .a (current value 155px)
Reduce the padding left/right on .a (current value 30px)
until the text fit the background
If a logo you could get away with giving the box a fixed width, as the text wont dynamically change, just match the box to logo width (or wider with centered text). If you need vertical spacing you could add an inline-block element inside the logo which contains the logo link itself
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
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;
}
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>