How to move a text span down a few pixels relative to an image?
up vote
0
down vote
favorite
I have the following html:
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
It comes out looking like this:
I would like to move the text span down by 2 pixels to better align it with the image. I've tried adding margin, padding, invisible border, but nothing seems to help. I've added vertical-align:bottom to the image and that kind of worked, but it moved the image too far down.
So how do I move the text 2 pixels down?
html css css3
edited Nov 9 at 18:28
Johannes
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
add a comment |
up vote
0
down vote
favorite
I have the following html:
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
It comes out looking like this:
I would like to move the text span down by 2 pixels to better align it with the image. I've tried adding margin, padding, invisible border, but nothing seems to help. I've added vertical-align:bottom to the image and that kind of worked, but it moved the image too far down.
So how do I move the text 2 pixels down?
html css css3
edited Nov 9 at 18:28
Johannes
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have the following html:
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
It comes out looking like this:
I would like to move the text span down by 2 pixels to better align it with the image. I've tried adding margin, padding, invisible border, but nothing seems to help. I've added vertical-align:bottom to the image and that kind of worked, but it moved the image too far down.
So how do I move the text 2 pixels down?
html css css3
edited Nov 9 at 18:28
Johannes
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
I have the following html:
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
It comes out looking like this:
I would like to move the text span down by 2 pixels to better align it with the image. I've tried adding margin, padding, invisible border, but nothing seems to help. I've added vertical-align:bottom to the image and that kind of worked, but it moved the image too far down.
So how do I move the text 2 pixels down?
html css css3
html css css3
edited Nov 9 at 18:28
Johannes
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
edited Nov 9 at 18:28
Johannes
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
edited Nov 9 at 18:28
Johannes
36.1k102766
edited Nov 9 at 18:28
Johannes
36.1k102766
edited Nov 9 at 18:28
Johannes
36.1k102766
36.1k102766
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
asked Nov 9 at 18:14
AngryHacker
27.1k75236440
27.1k75236440
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00
add a comment |
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00
add a comment |
4 Answers
4
active
oldest
votes
up vote
1
down vote
accepted
Consider these default factors:
<span>is an inline level element, top/bottom padding/margin will not apply.
vertical-alignis set tobaseline- aligns the baseline of the element.
To center align them vertically:
Option 1:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 2:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 3:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 4:
div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 19:12
Stickers
45.3k1176107
add a comment |
up vote
2
down vote
In my opinion, I suggest to append some div tags inside the logo.
By using 2 div tags within float: left, we make the 2 div is inline.
Combine display: table and display: table-cell to vertical center the height of divs.
.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>answered Nov 9 at 18:23
Tân Nguyễn
1
add a comment |
up vote
2
down vote
Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px
(I applied -6px in the snippet below to make it a bit more obvious)
As an alternative, you could apply similar settings to the span to move the text instead of the image.
img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 18:27
Johannes
36.1k102766
add a comment |
up vote
1
down vote
You can use different divs and with that use the margin or padding!
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
<div id="span2" class="text-center">
<span>Professional Grade Technology</span>
</div>
<!-- CSS FILE --!>
#span2{
margin-top: 2px;
}
answered Nov 9 at 18:17
Ninhow
286
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Consider these default factors:
<span>is an inline level element, top/bottom padding/margin will not apply.
vertical-alignis set tobaseline- aligns the baseline of the element.
To center align them vertically:
Option 1:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 2:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 3:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 4:
div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 19:12
Stickers
45.3k1176107
add a comment |
up vote
1
down vote
accepted
Consider these default factors:
<span>is an inline level element, top/bottom padding/margin will not apply.
vertical-alignis set tobaseline- aligns the baseline of the element.
To center align them vertically:
Option 1:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 2:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 3:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 4:
div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 19:12
Stickers
45.3k1176107
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Consider these default factors:
<span>is an inline level element, top/bottom padding/margin will not apply.
vertical-alignis set tobaseline- aligns the baseline of the element.
To center align them vertically:
Option 1:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 2:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 3:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 4:
div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 19:12
Stickers
45.3k1176107
Consider these default factors:
<span>is an inline level element, top/bottom padding/margin will not apply.
vertical-alignis set tobaseline- aligns the baseline of the element.
To center align them vertically:
Option 1:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 2:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 3:
img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>Option 4:
div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
position: relative;
bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>img, span {
display: inline-block;
vertical-align: middle;
}
span {
transform: translateY(2px);
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>div {
display: flex;
align-items: center;
}
span {
margin-left: 4px;
margin-bottom: -2px;
}<div class="text-center">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 0h1v3h-1zm0 13h1v3h-1zM16 7.5v1h-3v-1zm-13 0v1H0v-1zM1.99 2.697l.707-.707 2.121 2.12-.707.708zm9.192 9.193l.707-.708 2.121 2.121-.707.707zm2.121-9.9l.707.707-2.12 2.121-.708-.707zM4.11 11.182l.708.707-2.121 2.121-.707-.707zM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'%3E%3C/path%3E%3C/svg%3E" width="32" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 19:12
Stickers
45.3k1176107
answered Nov 9 at 19:12
Stickers
45.3k1176107
answered Nov 9 at 19:12
Stickers
45.3k1176107
answered Nov 9 at 19:12
Stickers
45.3k1176107
45.3k1176107
add a comment |
add a comment |
up vote
2
down vote
In my opinion, I suggest to append some div tags inside the logo.
By using 2 div tags within float: left, we make the 2 div is inline.
Combine display: table and display: table-cell to vertical center the height of divs.
.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>answered Nov 9 at 18:23
Tân Nguyễn
1
add a comment |
up vote
2
down vote
In my opinion, I suggest to append some div tags inside the logo.
By using 2 div tags within float: left, we make the 2 div is inline.
Combine display: table and display: table-cell to vertical center the height of divs.
.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>answered Nov 9 at 18:23
Tân Nguyễn
1
add a comment |
up vote
2
down vote
up vote
2
down vote
In my opinion, I suggest to append some div tags inside the logo.
By using 2 div tags within float: left, we make the 2 div is inline.
Combine display: table and display: table-cell to vertical center the height of divs.
.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>answered Nov 9 at 18:23
Tân Nguyễn
1
In my opinion, I suggest to append some div tags inside the logo.
By using 2 div tags within float: left, we make the 2 div is inline.
Combine display: table and display: table-cell to vertical center the height of divs.
.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>.float-left {
float: left;
}
.d-table {
display: table;
height: 32px;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<div class="text-center">
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Firefox_Logo%2C_2017.svg/1024px-Firefox_Logo%2C_2017.svg.png" height="32" />
</div>
</div>
</div>
<div class="float-left">
<div class="d-table">
<div class="d-table-cell align-middle">
<span>Professional Grade Technology</span>
</div>
</div>
</div>
</div>answered Nov 9 at 18:23
Tân Nguyễn
1
answered Nov 9 at 18:23
Tân Nguyễn
1
answered Nov 9 at 18:23
Tân Nguyễn
1
answered Nov 9 at 18:23
Tân Nguyễn
1
1
add a comment |
add a comment |
up vote
2
down vote
Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px
(I applied -6px in the snippet below to make it a bit more obvious)
As an alternative, you could apply similar settings to the span to move the text instead of the image.
img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 18:27
Johannes
36.1k102766
add a comment |
up vote
2
down vote
Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px
(I applied -6px in the snippet below to make it a bit more obvious)
As an alternative, you could apply similar settings to the span to move the text instead of the image.
img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 18:27
Johannes
36.1k102766
add a comment |
up vote
2
down vote
up vote
2
down vote
Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px
(I applied -6px in the snippet below to make it a bit more obvious)
As an alternative, you could apply similar settings to the span to move the text instead of the image.
img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 18:27
Johannes
36.1k102766
Apply display: inline-block; and position: relative; to the image. Now you can move it in relation to its default position, for example by adding bottom: -2px
(I applied -6px in the snippet below to make it a bit more obvious)
As an alternative, you could apply similar settings to the span to move the text instead of the image.
img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>img {
display: inline-block;
position: relative;
bottom: -6px;
}<div class="text-center">
<img src="http://placehold.it/40x20" height="32" />
<span>Professional Grade Technology</span>
</div>answered Nov 9 at 18:27
Johannes
36.1k102766
answered Nov 9 at 18:27
Johannes
36.1k102766
answered Nov 9 at 18:27
Johannes
36.1k102766
answered Nov 9 at 18:27
Johannes
36.1k102766
36.1k102766
add a comment |
add a comment |
up vote
1
down vote
You can use different divs and with that use the margin or padding!
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
<div id="span2" class="text-center">
<span>Professional Grade Technology</span>
</div>
<!-- CSS FILE --!>
#span2{
margin-top: 2px;
}
answered Nov 9 at 18:17
Ninhow
286
add a comment |
up vote
1
down vote
You can use different divs and with that use the margin or padding!
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
<div id="span2" class="text-center">
<span>Professional Grade Technology</span>
</div>
<!-- CSS FILE --!>
#span2{
margin-top: 2px;
}
answered Nov 9 at 18:17
Ninhow
286
add a comment |
up vote
1
down vote
up vote
1
down vote
You can use different divs and with that use the margin or padding!
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
<div id="span2" class="text-center">
<span>Professional Grade Technology</span>
</div>
<!-- CSS FILE --!>
#span2{
margin-top: 2px;
}
answered Nov 9 at 18:17
Ninhow
286
You can use different divs and with that use the margin or padding!
<div class="text-center">
<img src="~/images/prof_grade_tech.svg" height="32" />
<span>Professional Grade Technology</span>
</div>
<div id="span2" class="text-center">
<span>Professional Grade Technology</span>
</div>
<!-- CSS FILE --!>
#span2{
margin-top: 2px;
}
answered Nov 9 at 18:17
Ninhow
286
answered Nov 9 at 18:17
Ninhow
286
answered Nov 9 at 18:17
Ninhow
286
answered Nov 9 at 18:17
Ninhow
286
286
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53231266%2fhow-to-move-a-text-span-down-a-few-pixels-relative-to-an-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use transform:translate after making the element inline-block
– Temani Afif
Nov 9 at 19:00