I have a basic div with an icon and some text. If I don't try and change the size of the icon it lines up perfect.
But I want the icon to be bigger but still sit centred in the text. The problem is the icon doesn't sit centred in the div, it seems to move up so the text ends up lined to the bottom of the icon and the icon sits higher in the div. I expect the text to be centred in the icon as the icon would be centred in the div....
You can see it on this fiddle;
http://jsfiddle.net/8mjN7/1/
Pulling in
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
CSS
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
}
i {
margin-left: 10px;
font-size: 30px;
}
HTML
<div>
<i class="fa fa-globe"></i>
Foo bar
</div>
The simplest solution is to use the vertical-align property as follows:
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
vertical-align: middle;
}
see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/
Note: It is necessary to specify height: 30px for the i element and line-height: 40px of the parent container, otherwise, any default values may not work as expected.
CSS table-cell also works but the added complexity is not needed in this case.
I use this to make sure the icon is in the middle. The padding & line-height i think are the two most important.
background: rgba(143, 211, 157, 1);
border-radius: 100%;
color: #FFFFFF;
display: inline-block;
font-size: 55px;
height: 45px;
width: 45px;
padding: 40px 45px 40px 35px;
line-height: 45px !important;
transition: .5s;
Did you try to display the div like a table like this?
div {
display:table;
border: 1px solid red;
line-height: 40px;
font-size: 14px;
}
i {
display:table-cell;
text-align:center;
vertical-align:middle;
font-size: 30px;
}
Do you want something like this Link
CSS:
div {
border: 1px solid red;
line-height: 40px;
padding: 10px 0px;
font-size: 14px;
display:table;
vertical-align:middle;
width:100%;
}
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
display:table-cell;
vertical-align:middle;
}
Related
In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:
.navSectionHeader {
font-size: 1em;
color: #fff;
margin-left: 5px;
margin-bottom: 10px;
font-family: "Roboto";
font-weight: 700 !important;
border-bottom: 2px solid #6c6c6c;
}
/*.navSectionHeader::after {
content: ' ';
display: block;
border: 2px solid;
border-color: #6c6c6c;
margin-left: 0px !important;
}*/
The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!
Edit: The section header is in a <span> if it makes a difference.
Use padding instead of margin.
.navSectionHeader {
padding-left: 5px;
}
An example to see difference,
div {
display: inline-block;
width: 100px;
height: 20px;
border-bottom: 1px solid black;
background: red;
color: white;
}
.padding {
padding-left: 5px;
}
.margin {
margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
I created two tables using table,table-cell. But when I increase padding on first cell it also increasing padding on second cell also vice versa. What is the reason and how to solve it.
.desc-one{
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one{
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading{
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 5px;
}
.row-two-one{
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
display: table-cell;
padding-left: 20px;
}
.recent-heading{
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
In CSS code: If I increase padding-top / padding-bottom of my first table cell heading, the second cell elements also taking the padding mentioned in first cell (vice versa)
I have tried your code and found that only the first heading gets the padding top. Maybe you have another bit of code on your page somewhere that is adding this extra padding.
.desc-one {
width: 100%;
margin-bottom: 20px;
display: table;
}
.desc-one-one {
width: 350px;
background-color: #ffffff;
display: table-cell;
padding-right: 10px;
border-radius: 10px;
vertical-align: top;
box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
font-size: 20px;
font-family: opensans-semibold;
color: #2199e8;
padding-left: 10px;
padding-top: 100px;
}
.row-two-one {
max-width: 1200px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
display: table-cell;
padding-left: 20px;
}
.recent-heading {
color: #2199e8;
font-size: 20px;
font-family: opensans-semibold;
}
<div class="desc-one">
<div class="desc-one-one">
<h1 class="quick-heading">
Quick links
</h1>
</div>
<div class="desc-one-two">
<div class="row-two-one">
<h1 class="recent-heading open-semibold">
Low Stock Distributors
</h1>
</div>
</div>
</div>
Your code works just fine, as the other answers say..
However, in one comment you remark that it works the way you describe if you remove the vertical-align:top from the style of the first cell.
Then why did you have this property in there in the first place? It confuses the matter to people who want to answer.
The answer is, if you don't specify any vertical-align property, it defaults to 'baseline`. That means that both cells align their contents to one another, on the bottom of the first line of text in each of them. That's simply how table cells behave; they work together.
The solution, therefore, is to put vertical-align:top in, which causes the cells to align their contents to their tops.
I have the following code:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
What I get is
I want to show name in one line (even if it is outside the cell), but button should be always in cell (on the same line).
If name is short then it should be right after the name, if not then stick to the right of cell.
I used absolute positioning, but in this case button always sticks to the right of the cell. Not what I need for short names.
So, picture for long name is what I need, but for short name I want yellow button to show near name, not stick to the right side.
Working jsfiddle: https://jsfiddle.net/8kchkucv/
Is it possible to do this with CSS?
Andrew what you are asking is not possible with having only one css for both the buttons, either you can have something like this jsfiddle
https://jsfiddle.net/rohts76/8kchkucv/1
.but
{
cursor: pointer;
padding: 2px 5px;
margin: 5px 0px 0px 5px;
border-radius: 5px;
font-family: 'Pacifico', cursive;
font-size: 10px;
color: #FFF;
text-decoration: none;
background-color: #F2CF66;
border-bottom: 1px solid #D1B358;
text-shadow: 0px -2px #D1B358;
position:absolute;
//right: 15px;
bottom: 5px;
}
.cell{
white-space: nowrap;
width:175px;
position:relative;
}
.cell div{
margin: 0;
padding: .35em;
float: left;
width: 100%;
height: 100%;
}
tr{
background-color: #8db4e3;
background-size: 100% 100%;
}
This code will give you correct thing..
I have this CSS class:
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
I want to keep the same border width even when the number changes, from 10 to 9.
Right now, the border expands when the number changes.
Here's a JFiddle of what I mean.
I've already tried changing the padding attribute but I can't make it work.
Try this. Add display:inline-block and then line-height to vertically align the numbers. By setting this the box will expand. adjust the height & width as per your need. If so, do not forget to adjust the line-height relative to height of the box.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
line-height:36px; /*vertcally center the numbers*/
width: 36px;
height: 36px;
padding: 0px 5px 0px 5px;
display:inline-block; /* Added */
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
You can just explicitly set the width. I suggest a unit of mesure that's relative to the font size (namely ems)
Edit: it seems all you were missing was display:inline-block. You can't set the width of an inline element. Adding it will probably get you most of the way there.
.numberCircle {
border-radius: 30%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
/*width: 36px;
height: 36px;*/
padding: 0px 5px 0px 5px;
background: #fff;
border: 2px solid #333;
color: #333;
text-align: center;
font-size: large;
font-weight:bold;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
}
<span class='numberCircle'>10</span>
<span class='numberCircle'>9</span>
Check out these properties:
line-height:20px; /*this will center your numbers inside the border*/
width: 20px; /*set the same as line-height and height in order to give a square shaped border*/
height: 20px; /*set the same as line-height and width in order to give a square shaped border*/
display: inline-block;
line-height, width and height will shape your box. While the new display property will help to align the elements in a "one after the other" fashion. :)
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}