This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 4 years ago.
Can anyone please tell me How can I show the icon in the middle of the image left and right side?
I tried many solutions but they not worked.
.slide {
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
margin: 5px;
cursor: pointer;
height: 32px;
width: 32px;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
.image {
height: auto;
width: auto;
max-height: 350px;
max-width: 100%;
display: block;
margin: 0 auto;
}
<div style="width:100%" (click)="open_slider()">
<a class="slide">></a>
<img style="" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN.jpg">
<a class="slide"><</a>
</div>
Use vertical-align: middle; to img and .slide for vertical align. And use text-align: center; to parent div for horizontal align.
Here is the working snippet.
.slide {
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
margin: 5px;
cursor: pointer;
height: 32px;
width: 32px;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
vertical-align: middle;
}
.image {
height: auto;
width: auto;
max-height: 350px;
max-width: 100%;
display: block;
margin: 0 auto;
}
img {
display: inline-block;
vertical-align: middle;
}
<div style="width:100%; text-align: center;" (click)="open_slider()">
<a class="slide">></a>
<img style="" src="https://www.vsss.co.in/Admin/uploads/472075/POLAN.jpg">
<a class="slide">
<</a>
</div>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I can't vertical align text inside a display block anchor that has to be 100% of container.
I try to use vertical-align: middle but seems to be ignored
https://jsfiddle.net/0cah0jcw/
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
display: inline-block;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
vertical-align: middle;
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>
You can vertically align inline-block elements using a pseudo element like this:
.inner a:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
See demo below:
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
display: inline-block;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
vertical-align: middle;
}
.inner a:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>
Or a more modern approach might be to use a flexbox - use display: inline-flex for an inline flexbox and align vertically using align-items: center - see demo below:
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
display: inline-flex;
align-items: center; /*align vertically*/
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>
Solution for you here:
https://jsfiddle.net/0cah0jcw/4/
I used "display: inline-flex" in order to switch to the flex model which is WAY easier to vertical align with. Then I use align-content: center to center it!
Here's the code, with fallbacks for the last 20 versions of browsers.
vertical-align: middle;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
Here is the code:
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
If you run this code, you can see that the text "M" is not centered as I imagined. It works fine if you change the font-size to 30px or smaller. How did that happen? And how can I center the "M" right in the middle?
Another thing is although the "M" is not HORIZONTALLY centered, it seems that the "M" is still VERTICALLY centered. BUT, if I change the "M" to a "+", it will not be centered neither HORIZONTALLY nor VERTICALLY. BTW, it works perfectly in Chrome 53, I found that after I upgraded my Chrome.
Sorry about the poor English, hope you can understand what I mean.
You can use Flexbox and if you set align-items: center and justify-content: center it will always center text in span.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
color: green;
display: flex;
align-items: center;
justify-content: center;
}
<span>M</span>
<span>+</span>
<span>A</span>
Another option is to use pseudo-element to add letter and use position: absolute and transform: translate to center it.
span {
margin: 20px;
width: 30px;
height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
cursor: pointer;
position: relative;
}
span:after {
position: absolute;
left: 50%;
top: 50%;
content: 'M';
color: green;
transform: translate(-50%, -50%);
}
<span></span>
I think just change the width and height with 100%..
#add_cal_in {
width: 100%;
height: 100%;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
You can center letter horizontally by script:
var marginLeft = ($('#add_cal_in').width() - $('.letter').width())/2;
$('.letter').css('margin-left', marginLeft+'px');
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline-block;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="add_cal_in"><span class="letter">M</span></span>
Do you mean like this?
#add_cal_in {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 50px;
text-align: center;
background-color: #f38268;
display: inline;
vertical-align: top;
cursor: pointer;
color: #fff;
margin-left: 5px;
}
<span id="add_cal_in">M</span>
I have this html markup, I would like to center horizontally an icon I have in a sprite, it have 15 % for the icon anc 85% for the info-data class. I would like to align center the icon.
<div class="col-xs-12 mf-item">
<div class="ico icon-theme"></div>
<div class="info-data">Theme</div>
</div>
.mf-item {
background-color: #ffffff;
display: inline-block;
height: auto;
margin-left: 0;
min-height: 30px;
}
.ico {
display: inline-block;
line-height: 30px;
margin: 0 auto;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 15%;
}
.info-data {
border-bottom: 1px solid #0f8ccd;
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
}
.icon-theme {
background-position: 0 -90px;
height: 30px;
width: 23px;
}
Any help will be appreciate it!!!!
Thanks!
Your are missing your float:left styling. I would do it something like this
* {
box-sizing: border-box;
}
.mf-item {
background-color: #ffffff;
display: inline-block;
height: auto;
margin-left: 0;
min-height: 30px;
width:100%;
}
.ico {
display: inline-block;
height: 30px;
margin: 0 auto;
padding-right: 5px;
text-align: center;
vertical-align: middle;
width: 15%;
float:left;
}
.info-data {
border-bottom: 1px solid #0f8ccd;
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
float:left;
}
.icon-theme {
background-position: 0 -90px;
height: 30px;
width: 23px;
display:block;
margin:0 auto;
background-color:red; //your background image imaging
}
<div class="col-xs-12 mf-item">
<div class="ico"><span class="icon-theme"></span></div>
<div class="info-data">Theme</div>
</div>
Try
vertical-align: middle;
that usually does the trick!
http://codepen.io/leongaban/pen/ACJta
^ Updated (I can never get SASS to work right in Codepen)
Can't align to the middle my elements above. Using SASS, I want to avoid using position hacks
<main>
<div class="gradient">
<div class="hero">
<img src="http://placehold.it/350x150" alt=""/>
</div>
</div>
<section class="tagline">
<h1>Hi there Lorem Ipsum <em>My name is Bob</em></h1>
<button>Learn More</button>
</section>
</main>
body {
font-family:Arial
}
.hero {
display: table-cell;
//position: relative;
margin: 0 auto;
// top: 42%;
// left: 10%;
text-align: center;
width: auto;
height: 447px;
vertical-align: bottom;
img {
width: 300px;
height: 280px;
text-align: center;
vertical-align: bottom;
border:0;
}
}
.tagline {
position: relative;
margin: 0 auto;
width: 100%;
height: 300px;
text-align: center;
color: blue;
background: gray;
z-index: 2;
h1 {
margin: 0 auto;
padding-top: 5%;
width: 80%;
font-size: 42px;
text-align: center;
}
em {
font-weight: bold;
}
button {
margin-top: 25px;
padding: 10px 20px;
font-family: Arial;
font-size: em(21);
color: white;
border: 0;
background: orange;
}
}
I was able to center your elements above my doing the following:
.hero {
margin: 0 auto;
text-align: center;
width: 50%;
height: 447px;
vertical-align: bottom;
}
It seems it did not want to center because you had specified width: auto
This question already has answers here:
How do I add a "search" button in a text input field?
(7 answers)
Closed 9 years ago.
Here's what I've got:
HTML
<div class="combobox">
<input type="text" value="" name="brand" class="text" id="brand">
<span class="dropdown_btn"></span>
</div>
CSS
.combobox {
margin: 0;
padding: 0;
vertical-align: middle;
}
.combobox input {
height: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
}
But it comes out like this:
I don't know where the gap is coming from; why isn't the text input snug against its container div like the blue button is?
Try setting the vertical-align:top to input
http://jsfiddle.net/KDN8s/4/
.combobox {
margin: 0;
padding: 0;
}
.combobox input {
margin: 0;
padding: 0;
height: 20px;
vertical-align: top;
}
.combobox .dropdown_btn {
width: 20px;
height: 24px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
}
<div class="combobox">
<input type="text" value="" name="brand" class="text" id="brand">
<span class="dropdown_btn"></span>
</div>
Try this to add vertical-align: middle; to .combobox .dropdown_btn and remove it from the combobox class:
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
vertical-align: middle;
}
You need to apply vertical-align: middle to your inline elements:
.combobox {
margin: 0;
padding: 0;
}
.combobox input {
height: 20px;
line-height: 20px;
margin: 0;
padding: 0;
vertical-align: middle;
}
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
vertical-align: middle;
}
See: JSFiddle
The vertical-align property is not inherited, so you need to specify it to any inline elements that you want to adjust.
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
vertical-align: middle;
}
http://jsfiddle.net/KDN8s/5/