I have website http://11klassniki.ru and I try to put text in in the middle using text-align:center but it doesn't work.
#konkurs_ege {
position:absolute;
top:10px;
left:380px;
width:140px;
height:80px;
background-image:url('http://11klassniki.ru/banners/konkurs_ege.jpg');
}
#konkurs_ege a {
text-decoration: none;
text-shadow: -1px -1px 0 #000000;
text-transform: uppercase;
font: 16px Arial, sans-serif;
font-weight:700;
width:100%;
text-align:center;
vertical-align: middle;
}
Here is code
<div id="konkurs_ege">
<a href='http://11klassniki.ru/view_post.php?id=144'>Konkurs!<br>how I made<br>IT</a>
</div>
I would like to have text: "Konkurs! how I made IT" in the middle of box (width:140px;
height:80px).
You need to have display: block.
.secondArticle a {
display: block;
text-align: center;
}
If you do not want to center the paragraph below the image, you can use span tag.
.secondArticle a span {
display: block;
text-align: center;
}
I believe the issue is that you're applying the text-center to the a tag, instead of the container. If you add it to the container ( konjurs_ege ), it should work. Worked for me on Chrome and FF.
#konkurs_ege {
position: absolute;
top: 10px;
left: 380px;
width: 140px;
height: 80px;
text-align: center;
background-image: url('http://11klassniki.ru/banners/konkurs_ege.jpg');
}
Related
I have 1 div with two separate sections of text. However, one of these sections of text is smaller than the other, leaving it slightly lower than the other section.
I would like it to be centered both vertically and horizontally within the div - inline with the larger text... margin-bottom is not working, however margin-left and margin-right are... how do I do this? Thankyou.
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
font-size: 55px;
color: black;
margin-left: 70px;
text-align: left;
}
a.miniheader {
text-decoration: none;
margin-left: 20px;
}
span.smallerish {
font-size: 35px;
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader"><a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ><a class = "miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a></a>
</div>
This is how I would do it:
Fix invalid html
Put the font sizes on the anchors
Vertical align the anchors
If you want the text horizontally centered, then use text-align center on the div (instead of left with margin)
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
color: black;
text-align: center;
}
a.header {
font-size: 55px;
vertical-align:middle;
}
a.miniheader {
font-size: 35px;
text-decoration: none;
margin-left: 20px;
vertical-align:middle;
}
span.smallerish {
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader">
<a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ></a>
<a class="miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a>
</div>
Set vertical property of anchor tag
.portfolioHeader a
{
vertical-align: middle;
}
You need to vertical-align the 'a' tags.
This css should help.
.portfolioHeader {
color: black;
display: table;
font-family: coolfont;
font-size: 55px;
margin-left: 70px;
position: relative;
text-align: left;
top: 20px;
vertical-align: middle;
}
a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.miniheader {
left: 30px;
position: relative;
text-decoration: none;
top: -5px;
}
span.smallerish {
color: #3f3f3f;
font-size: 35px;
text-decoration: none;
}
How can I vertically align icon inserted using :before method?
Here is what I have:
<div class="button submit">
<a class="submit check_car_search" href="#" >Some Text</a>
</div>
CSS:
.button a{
background: none;
background-color: #32BBE7;
text-indent:1px;
color:#FFF;
text-decoration: none;
display: table-cell;
vertical-align:middle;
text-align:center;
height: auto;
padding: 10px;
border-radius: 3px;
font-weight: 600;
font-size: 50px;
font-style: italic;
}
.button a:hover{
background-color: #2597F0;
}
.button a:before {
content:url(http://i.stack.imgur.com/tKsDb.png);
position: relative
}
JSFiddle: https://jsfiddle.net/1z83tc1o/
How Can I align vertically icon relative to the text?
You can use background and set is size (width, height), Then you can use vertical-align.
CSS
.button a:before {
position: relative;
display: inline-block;
width: 18px;
height: 16px;
vertical-align: middle;
content:"";
background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
margin-right: 20px; // Optional
}
DEMO HERE
You use background and absolute position the icon to perfectly vertical align in the middle.
.button a:before {
content: " ";
background-image: url(http://i.stack.imgur.com/tKsDb.png);
position: absolute;
width: 18px;
height: 16px;
top: 50%;
margin: -8px 0 0 -25px;
}
Here is the example : https://jsfiddle.net/1z83tc1o/3/
I have a little problem with my css, I can't align an image with a text input field. The site is live at http://jocolina.com/picemon/pokelocator.php
The CSS I have for the text input and image is:
#loginUTC{
width:30%;
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align:center;
font-weight: bold;
/*margin: 0 auto;*/
border-color: #336688;
}
#magniIMG{
display: inline;
height: 60px;
cursor: pointer;
}
#locator{
margin: 0 auto;
text-align:center;
height:60px;
}
Where loginUTC is the text input, magniIMG is the image I want to algin with the input, and locator is the div in which both of the elements are.
You can set both elements to vertical-align: bottom;.
#loginUTC{
vertical-align: bottom;
}
#magniIMG{
vertical-align: bottom;
}
You can use margin-bottom in negative at image that will fix it
#magniIMG {
display: inline;
cursor: pointer;
height: 60px;
margin-bottom: -18px;
}
You could use floats to align the form elements with images like you are trying to achieve here. You'll also need to add some widths to the containing element and the input to align everything. Try -
#locator {
margin: 0 auto;
text-align: center;
height: 60px;
width: 545px;
}
#loginUTC {
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align: center;
font-weight: bold;
/* margin: 0 auto; */
border-color: #336688;
float: left;
}
#magniIMG {
/* display: inline; */
height: 60px;
cursor: pointer;
float: left;
}
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 3 years ago.
I would like to have a divider on my page that looks like this:
What is the best way to do that?
html
<h3><span>My latest work</span></h3>
css
h3 {
position:relative;
text-align:center;}
h3 span {
display:inline-block;
padding:0 10px;
background:#fff;
}
h3:before {
content:"";
display:block;
position:absolute;
z-index:-1;
left:0;
right:0;
top:50%;
height:1px;
background:#ccc;
}
We can do this without images or masking lines like so:
HTML
<div class="rule">
<div class="line"><div></div></div>
<div class="words">words are cool</div>
<div class="line"><div></div></div>
</div>
CSS
.rule {
display: table;
}
.rule>div {
display: table-cell;
white-space:nowrap;
}
.line>div {
border-bottom: 1px solid silver;
height: 1px;
}
.words {
padding: 0 5px;
}
.line {
width: 50%;
vertical-align: middle;
}
Demo: http://jsfiddle.net/5tqE5/1/
This uses attr() which is not supported in older browsers. It could be replaced with an extra element.
<div class="lines" data-text="Some Text Goes Here"></div>
.lines {
position: relative;
font-size: 20px;
font-family: sans-serif;
margin: 0 auto;
border-top: 1px solid silver;
margin-top: 20px;
}
.lines:before{
content: attr(data-text);
background-color: #fff;
position: absolute;
text-align: center;
left: 50%;
width: 220px;
margin-left: -110px;
padding: 10px;
top: -20px;
}
Dunno about the 'best' - you've given no terms by which to assess that. Smallest, fastest, most compatible, etc, etc.
Anyhoo, I just took a 1-pixel wide slice of your image and saved it. I then use it as the background-image of the div.
CSS:
#myDiv
{
background: url(horizline1x41px.png) repeat;
text-align: center;
line-height: 41px;
}
#myDiv span
{
padding-left: 16px;
padding-right: 16px;
background: white;
font-weight: bold;
font-size: 1.5em;
}
HTML:
<div id='myDiv'><span>OUR LATEST WORK</span></div>
Demo: http://jsfiddle.net/8zve4/
I don't like the extra markup, but this should work.
CSS:
.hline {
border: 1px solid #EEE;
color: #666;
font-family: helvetica;
font-weight: bold;
font-variant: small-caps;
letter-spacing: .1em;
line-height: 0px;
text-align: center;
text-transform: uppercase;
}
.hline > span {
background-color: #FFF;
padding: 0px 1em;
}
HTML:
<div class="hline"><span>Our latest work</span></div>
I want to align some text in the middle of my element using CSS. This is my markup:
<div id="testimonial">
<span class="quote">Some random text that spans two lines</span>
</div>
And the relevant CSS:
#testimonial {
background: url('images/testimonial.png') no-repeat;
width: 898px;
height: 138px;
margin: 0 auto;
margin-top: 10px;
text-align: center;
padding: 0px 30px 0px 30px;
}
.quote {
font-size: 32px;
font-family: "Times New Roman", Verdanna, Arial, sans-serif;
vertical-align: middle;
font-style: italic;
color: #676767;
text-shadow: 1px 1px #e7e7e7;
}
Usually to get .quote in the vertical middle of #testimonial, I'd do:
.quote { line-height: 138px; }
But this breaks the layout because the text in .quote spans more than one line.
As you can see I've tried doing vertical-align: middle; and that doesn't work either.
Any help is appreciated. Cheers.
I recently found out that vertical centering of something which has undefined dimensions goes very well with vertical-align: middle; in combination with line-height: 0;.
Check out this demonstration fiddle.
HTML:
<div id="testimonial">
<span><span class="quote">Some random text<br />that spans two lines</span></span>
</div>
CSS:
#testimonial {
background: #333 url('images/testimonial.png') no-repeat;
width: 898px;
height: 138px;
margin: 0 auto;
margin-top: 10px;
text-align: center;
padding: 0 30px 0 30px;
line-height: 138px;
}
#testimonial>span {
display: inline-block;
line-height: 0;
vertical-align: middle;
}
.quote {
font-size: 32px;
font-family: "Times New Roman", Verdanna, Arial, sans-serif;
font-style: italic;
color: #676767;
text-shadow: 1px 1px #e7e7e7;
line-height: 32px;
}
You can do it simpler with single span
http://jsfiddle.net/7ebLd/
#testimonial {
height: 138px;
line-height: 138px;
}
span {
display: inline-block;
line-height: 19px;
vertical-align: middle;
}
as nobody's answered it with the table cell solution yet..
here you go - with an an IE6/7 solution too (though it involves a yukky HTML hack) as #thirtydot says in comments, table display properties are not supported by IE7 and below -
if you don't want/like the extra HTML element, you could just give IE7 and below some top padding on the .quote - so that while it wouldn't be vertically centered accurately it may be an acceptable fall back
CSS:
#testimonial {
background: #eee url('images/testimonial.png') no-repeat;
width: 898px;
height: 138px;
margin: 10px auto 0;
padding: 0 30px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.quote {
font-size: 32px;
font-family: "Times New Roman", Verdana, Arial, sans-serif;
font-style: italic;
color: #676767;
text-shadow: 1px 1px #e7e7e7;
}
IE CSS:
<!--[if lte IE 7]>
<style type="text/css" media="screen">
#testimonial i {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.quote {
display: inline-block;
width: 100%;
vertical-align: middle;
}
</style>
<![endif]-->
HTML:
<div id="testimonial">
<i></i>
<span class="quote">Some random text <br> that spans two lines</span>
</div>
This website offers a plethora of options for vertical centering with css.
If you can set a height on .quote, I think Method 2 would work in this situation:
.quote {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}
Another option is to use display:table-cell; vertical-align:middle; method in CSS, but this option does not work in IE, so you'll have to also set an IE-specific version.
This site:
http://www.emblematiq.com/blog/vertical_align_with_css/
With the result:
http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html
Uses the following markup/css to center vertically multiple lines using the display: table-cell, vertically-align: middle method:
<div id="wrapper">
<img src="0.gif" alt="stuff" id="fixed" />
<div id="floating"><div><div>
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
</div></div></div>
</div>
p {
margin:0;
padding:0;
}
#wrapper {
width:550px;
border:1px solid #666;
padding:10px;
height:300px;
}
#fixed {
float:right;
width:200px;
height:300px;
background:#666;
display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
display:table;
position:static;
}
#floating { /*for IE*/
width:300px;
height:100%;
background:#EAEAEA;
position:relative;
}
#floating div { /*for IE*/
position:absolute;
top:50%;
}
#floating>div { /*for Mozilla and Opera*/
display:table-cell;
vertical-align:middle;
position:static;
}
#floating div div {
position:relative;
top:-50%;
}