I have a button with a span icon inside it. I want the icon to be a bit more vertical centered from the text inside the button, but the span is taking the whole height of the button. This way the text also moves when I put margin-top with the text.
https://jsfiddle.net/DTcHh/26184/
I've put the background-color:red; to show my problem.
I don't think that giving it a standard hight is a clean fix for it.
button {
height: 50px;
display: inline-block;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
line-height: 50px;
font-size: 18px;
;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button>
Send
<span class="glyphicon-envelope"></span>
</button>
Try removing the line-height: 50px;. Also your jsfiddle points to something else it seems?
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
font-size: 18px;
position: relative;
top: 2px;
}
Reduce the line-height and remove padding in span.glyphicon-envelope
button {
height: 50px;
display: inline-block;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 1px;
background-color: red;
display: inline-block;
line-height: 16px;
font-size: 18px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button>
Send
<span class="glyphicon-envelope"></span>
</button>
Change button display to table-cell and add vertical-align: middle to span glyphicon-envelope
button {
height: 50px;
display: table-cell;
margin: 0;
padding: 0px 40px;
position: relative;
z-index: 1;
}
span.glyphicon-envelope {
padding-left: 20px;
background-color: red;
display: inline-block;
line-height: 50px;
font-size: 18px;
vertical-align: middle;
}
See an example: https://jsfiddle.net/pdz696pv/2/
You could also just do:
span.glyphicon-envelope {
position: relative;
top: 2px;
}
Changing the value of the top property will move it up and down (you could use bottom as well obviously).
This is a simple solution if you don't wish to change any of the other properties of the envelope.
Related
how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.
Here, I am trying to create the browser tab.
JsFiddle
.intrnlTabs {
background: #f0f1f3;
height: 35px
}
.intrnlTab {
background: #e7e9ec;
display: inline-block;
height: 30px;
text-align: left;
margin-top: 5px;
line-height: 35px;
border-top-left-radius: 10px;
position: relative;
margin-left: 12px
}
.intrnlTxt {
display: inline-block;
max-width: 150px;
height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 30px;
padding: 0 20px 0 10px
}
.intrnlCls {
position: absolute;
right: -23px;
height: inherit;
background: #dee1e5;
box-sizing: border-box;
top: 0;
width: 33px;
transform: skewX(30deg);
border-top-right-radius: 5px;
cursor: pointer;
display: inline-block;
text-align: center
}
.intrnlCls:hover {
background: #d7d8d8
}
.intrnlClsicon {
transform: skewX(-30deg);
display: inline-block
}
Output What I got
Output What I'm expect
I want newly added tab header should go behind previous tab without adding z-index value. I have achieved it adding z-index value. But, I don't want to add z-index value.
You don’t need to calculate a specific z-index for each item, or assign it via JS to begin with.
Adding a z-index of 1 to these “X” items is enough already to achieve what you want:
.intrnlCls { z-index:1; }
I want a heading, a logo and a button to all be in line where the heading is centered, the logo is offset to it's right and the button is small on the right hand side.
I can hack this together if I fix the margins but this is not scalable and therefore don't want it as a final solution. What's a better way to do this?
My code is below and I also have it posted here as well: http://codepen.io/blueduckyy/pen/RpKoMJ .
HTML:
<div class="top-bar username-heading">
<img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
<h1>blueduckyy</h1>
<a class="button user-edit-button" href="/users/edit">Edit</a>
</div>
CSS:
.username-heading img {
float: right;
width: 100px;
height: 100px;
margin-left:-250px;
margin-right:150px;
}
.username-heading h1 {
position: relative;
top: 18px;
left: 10px;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
float: right;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
You can place the items with 'position: absolute' inside the container:
.username-heading {
vertical-align: top;
position: static;
}
.username-heading img {
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
.username-heading h1 {
position: absolute;
top: 18px;
margin: 0 auto;
width: 100%;
text-align: center;
font-size: 3.5rem;
font-weight: bold;
display: inline-block;
}
.username-heading {
height: 120px;
background: yellow;
}
.user-edit-button {
position: absolute;
right: 0;
top: 120px;
padding: 5px 5px 5px 5px;
margin-top: -20px;
margin-bottom: 1px;
}
Keep in mind that the '.username-heading' position must be other than 'static'.
Just use positioning,
position: relative;
top: 25px;
This is the only css youll need.... Here is the pen
.top-bar{
display: flex;
align-items: center;
justify-content: space-between;
background-color: orangered;
}
img{
height: 40px;
border-radius: 50%;
}
When adding a :before selector, in this scenario I am trying to insert a Phone Icon to appear above the .front-page-contact div. Ideally, so it would be centered above the text in the .front-page-contact div.
How could I go about positioning this selector to achieve the result mentioned above?
.front-page-contact .widget:nth-of-type(1) {
text-align: center;
}
.front-page-contact {
background-color: #00AFBE;
padding: 20px 0;
}
.front-page-contact h2 {
font-size: 26px;
color: #fff;
margin: 0;
position: relative;
}
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: relative;
line-height: 1em;
margin: 0 auto;
}
Screenshot:
Give h2 position: relative then the pseudo element will position itself absolutely to the h2 not to the page. Its hard to say more without seeing the markup.
EDIT:
Change it to:
.front-page-contact h2:before {
font-family: Ionicons;
content: "\f4b8";
font-size: 40px;
background-color: tomato;
border-radius: 50%;
width: 40px;
height: 40px;
padding: 20px;
display: block;
position: absolute;
line-height: 1em;
left: calc(50% - 40px);
top: -60px;
}
Adjust left / top as necessary
I'm trying to align vertically a text block. I have a :before pseudo-element and what I'd like to achieve is having both aligned to the middle.
Is it possible to achieve it without extra wrapper? Here's what my problem looks like:
HTML:
<div class="fail">Something's wrong</div>
<div class="success">
<span>Perfect middle</span>
</div>
CSS fail:
.fail
{
background: orange;
font-size: 30px;
display: inline-block;
}
.fail:before
{
background: red;
content: '✗';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
CSS success:
.success
{
font-size: 30px;
background: lime;
display: inline-block;
}
.success:before
{
background: green;
content: '✓';
text-align: center;
display: inline-block;
line-height: 60px;
margin-right: 10px;
vertical-align: middle;
width: 60px;
}
.success span {
vertical-align: middle;
}
It might be not so obvious from this picture, but the left one is too high, about 2-3 pixels of difference. It matters especially for smaller elements.
So my question is: can I achieve perfect middle with just one HTML tag + :before?
Because I dont like inline elements that much, I would do it like this:
.fail {
position: relative;
float:left;
padding-right: 10px;
line-height: 60px;
font-size: 30px;
background: orange;
}
.fail:before {
content: '✗';
display: inline-block;
width: 60px;
margin-right: 10px;
text-align: center;
background: red;
}