I have this list block (SEE DEMO) and need to vertically centre the text with the icon so whenever I have more than 1 line of text everything stays in the middle of the LI. I know that other people asked similar questions here but none worked for me :(
DEMO
you can make use of the display:table properties by changing the following styles:
ul.quote-list li {
font-size: 14px;
color: #2a80b9;
border-top: 1px dashed #dbdbdb;
line-height: 1.2;
display:table;
width:100%;
}
ul.quote-list li > a { /*please note the extra > here */
color: #2a80b9;
text-decoration:none;
display:table-cell;
vertical-align:middle;
padding:18px 0 18px 20px;
}
.right {
display:table-cell;
vertical-align:middle;
width:30px;
text-align:center;
}
Example
You can postion the text and the icon using display: inline-block; with a vertical-align: middle;. You also need to remove the float: right; from the icon.
Here is a quick example. I've added a width and padding-right to the text just to make it look better.
Or use the solution from #ilmk in the comments :)
Related
I need help to center a link in a div. horizontal and vertical align, I dont know how it works I test multiple possibilities but I failed.
.Menu {
height:81px;
left : 0px;
right : 0px;
border:1px solid #727272;
border-radius:9px;
-webkit-border-radius:9px;
box-shadow: 1px 1px 6px #333;
background-color: #FFFFFF;
margin:5%;
vertical-align:middle;
padding-left : 25%;
}
.Picto {
position:absolute;
left : 7%;
height:42pt;
width:42pt;
}
a {
text-decoration : none;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:36px;
color: #666;
}
html :
<div class="Menu" style="display:none;" id="Trav"><img src="img/trav.png" alt="Travaux" class="Picto"/>Travaux</div>
<div class="Menu" style="display:none;" id="Equi"><img src="img/arbo.png" alt="Equipements" class="Picto"/> Equipements</div>
Thanks in advance.
Regards
try this
.Menu {
height:81px;
line-height:81px;
text-align-center;
}
for vertical align middle
line-height and height same amount
for horizantal align center
use text-align
for image and text align middle use
vertical-align:middle in image class
if I remember correctly in your CSS try content-align:center. this is what I have used in every web page I have made and it has worked every time, also you would be better off with posistion:relative instead of position:absolute
Here is an example
http://jsfiddle.net/Lm11a0we/
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
I need help with the frontend. Is it possible to set the style for the number (string) without breaking it in HTML?
How I wish that it looked like in HTML:
<div>Dodano: <span>127</span> stylizacji</div>
The effect that I want to get should look like this:
link to Dropbox
You can use pseudoelement "after" and it works fine with any number of digits without breaking into html. You will need a background-image from the first answer.
span {
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 21px;
padding-left:8px;
position:relative;
margin-left:10px;
margin-right:-2px;
}
span:after {
content:'';
display:block;
position:absolute;
width:8px;
height:66px;
background:#fff;
top:0;
right:0;
}
Here is an example JSFIDDLE
Here is completely CSS solution without changing your HTML. However, I did create a custom image for the background to go behind the numbers. You will have to tweak the size to make sense with your website.
Using a repeating background with a rectangle including a small space on the right-side to "space" out the digits. Use letter-spacing to give more space between the numbers.
background: transparent url('https://dl.dropboxusercontent.com/u/2722739/other/bg.png') 0 0 repeat-x;
color: white;
display: inline-block;
font-size: 53px;
letter-spacing: 20px;
overflow: hidden;
padding-left: 8px;
text-align: justify;
width: 130px;
See the example: http://jsfiddle.net/amyamy86/6FaLd/
You can apply styling to the span element.
<div>Dodano: <span style="color:blue;">127</span> stylizacji</div>
<div style="background-color:#f1f1f1; border:1px solid#dddddd; width:190px; padding: 27px;">
Dodano:
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">1</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">2</span>
<span style="background-color:#152b53; color:#fff; padding:4px; font-weight:bold;">7</span>
stylizacji
</div>
Im trying to make a Tumblr theme, and trying to make text go away from the border 20px, but it is also pushing the photos, videos, and other elements that are not text over, which is IS supposed to do, is there a way to only align the text?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
Thats my code.
http://puu.sh/83iTL.jpg
Thats what is happening, but I want to only align the text. Is this possible?
Thanks :)
EDIT: The entire code: http://pastebin.com/6q4hFyZL and the page is em202020.tumblr.com
<edit>
From your page : http://em202020.tumblr.com/
You could do:
.posts a:first-of-type img,
.posts iframe {
margin-left:-80px;
}
Or if you like it better :
.posts a:first-of-type img {
margin-left:-80px;
}
.posts iframe {
margin-left:-20px;
}
.</edit>
first guess answer irrelevant.
you can do :
.posts img:first-child {/* it will only select the first-child if it is an img tag */
margin-left:-20px;/* swallow that padding-left:20px; */
}
could you add css rules for .post img?
.posts {
border:solid 1px #333333;
border-radius:15px 15px 15px 15px;
color:black;
margin-bottom:20px;
min-height:120px;
padding-left:20px;
text-align:left;
}
#add this?#
.posts img {
padding:0px;
I've a simple html ul/li/a vertical menu as this : http://jsfiddle.net/byXED/3/
<div id="front_page_a">
<ul id='nav'>
<li>TEXT</li>
<li class="scostati">TEXT</li>
<li ><span>TEXT</span></li>
<li class="scostati"><span>TEXT</span></li>
<li><span>TEXT</span></li>
</ul>
</div>
The problem is the css i put for the a tag, cause I don't get the right way to have the same space on top and bottom of the text in the anchor tag
#pageNavigation {
background-image: url('../Images/TIBC_Base/nav-bg.png');
background-repeat: repeat-y;
margin:5px 0;
padding:5px 15px 5px;
min-height:125px;
}
#pageNavigation .navContent {
display: table;
width:240px;
list-style-type: none;
margin:0; padding:0;
}
#pageNavigation .navContent li {
display: table-row;
height:57px;
text-align:center;
}
#pageNavigation a {
display: table-cell;
vertical-align: middle;
height:57px;
border-top:0px #E1E1E1 solid;
border-bottom:1px #E1E1E1 solid;
font-size:16px;
text-decoration:none;
color:#485963;
text-shadow: 0px -1px #EEEEEE;
}
Please, my question is : why the text of the link ("TEXT") has a space at the bottom ? what I have to do to have the text vertically centered in the anchor space?
I've tried various way, but none functioned. In the posted example I've put a padding:0px 7px; for the anchor tag but it doesn't work vertically.
The code posted has the problem with Firefox , it works fine with Safari.
In the CSS a { you have a border around the anchor tag and a padding. If you make this values to 0 (zero) your "extra space" disapears.
a {
line-height:100%;
display:table-cell;
text-decoration: none;
background-color:red;
border: 0px solid; /*changed to zero, removes border*/
font-size: 35px;
padding: 0px 0px; /*changed to zero, removes horiz space before&after text*/
color:white;
vertical-align: middle;
}
You should know that apparently Gecko and WebKit have different interpretations on how line-heights work. This fiddle illustrates the problem: http://jsfiddle.net/w88Ss/. According to the definition, it seems that Firefox is doing the right thing; anyhow, there is this difference.
If you think, for any reason, that you should use this approach, you can try a higher line-height, like line-height:40px, specifically for firefox, maybe using a JS code.
One solution, let's say a light workaround, is to use only some font and not some other.
In other words, I've noted that if in the css of the a tag I specify a font like Arial the vertical alignment is perfect with Firefox & Safari. If I use some other fonts like serif, Helvetica the problem is still there.