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/
Related
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*/
}
this is my html
<div class="logoArea">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
this is my css
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.titleClass {
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
margin:auto;
background-color:red;
width:40%;
top:10px;
}
This is what the result:
I want it to be this:
Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.
Working fiddle
There are few ways to solve this. Here is one with minimal changes to your existing styling.
.logoArea img {
float: left;
}
Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.
EDIT
Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.
You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Try using:
<div class="logoArea" style="display:table-cell; vertical-align:middle">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
Try this:
HTML:
<div class="logoArea">
<img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
<div class="titleClass">Call Center Dashboard</div>
<div style='clear:both;'></div> </div>
CSS:
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}
JavaScript (must include jQuery first)
$(document).ready(function(){
var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
var pTop=((h-ch)/2)+'px';
$('.logoArea .titleClass').css('paddingTop',pTop);
});
Demo: http://jsfiddle.net/zcAjq/
My link has a background color. I need it to be centred but for its background to not take up the full width. I also cant set a fixed width for the link, as the text is provided by a CMS and will var. Cant this be solved without adding additional HTML?
http://jsfiddle.net/jx3e4/2/
<a class="green-button" href="#">Download</a>
<a class="green-button two" href="#">Download</a>
.green-button {
background: none repeat scroll 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
}
.two {
margin: auto;
display: block;
}
EDIT - Sorry, I didnt mention, but there is also text within the same parent div that needs to keep its default text align of left.
http://jsfiddle.net/jx3e4/7/
Give the parent div text-align:center and the green button - display:inline-block
UPDATED FIDDLE
Try this..........
HTML
<div class="links">
<a class="green-button" href="#">Download</a>
<br />
<br />
<a class="green-button two" href="#">Download</a>
</div>
CSS
.green-button {
background: none repeat 0 0 blue;
border-bottom: 1px solid red;
color: #FFFFFF;
text-align:center;
margin:auto;
padding: 6px 12px 6px 12px;
}
.links {
width:100%;
display:block;
text-align:center;
}
jsFiddle
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.
I need to implement a menucard in to a website. My customer wants, that it looks exactly like on the card in the restaurant.
Is it with HTML possible to put a border-line directly under the text like on the image below ("Hauptgerichte")? And if yes, how could I realize that?
Thanks!
If you want the border to touch the text, you can adjust the line-height to something small:
p
{
border-bottom: 1px solid black;
line-height: 10px;
}
http://jsfiddle.net/kz43g/
Here is 1 variant - here is a fiddle.
html:
<div>
<p> some text </p>
</div>
css:
*{
padding:0;
margin:0;
}
div{
border-bottom:1px solid #000;
}
p{
margin-bottom:-5px;
}
i just put negative bottom margin to the text container (in this case the p tag)
This is possible in HTML / CSS: Example
HTML:
<h3 class="yourClass">Text place</h3>
CSS :
.yourClass{
width:300px;
border-bottom: 1px solid #000;
text-indent:50px;
line-height:80%;
}
In this example I'm changing the line height to move the text under the line and the then using text-indent to move it to the correct positioning. It should give you the desired results. There are a few ways to do this, but this will require less HTML.
Here is a JS Bin that shows how this could be done. I added a border to the bottom of the paragraph and a little padding to the left. Then I changed the line height of the paragraph so it would sit right on the border.
You could try working with:
text-decoration: underline;
I choose to use the border property for easy customization.
CSS from JS Bin:
p {
border-bottom:1px solid #333;
line-height: 50%;
padding: 0 0 0 40px;
}
Pure CSS solution is possible with pseudoelement after, see fiddle. The distance from text is done by the bottom:3px:
.underline {
position:relative;
}
.underline::after {
content: '';
width: 100%;
position:absolute;
bottom: 3px;
left:0;
border-bottom: 1px solid black;
}
edit: the line-height solution looks better :)
Put the text inside of a div. Then, make the div a set width. Then, add a border to the div.
<div id="title">
<h2> Hauptgerichte </h2>
</div>
/*CSS*/
#title{
width: 50px;
border-bottom: 2px solid #000000;
}
Put the header in H tags, then target the H tag with CSS and apply border bottom.
HTML
<div id="content">
<h1>title</h1>
</div>
CSS
#content h1{
Border-bottom:1px solid #999;
Width: 150px;
}