i have a button inside a div which is currently at the top of the div. I want to center it vertically inside iths parent div.
.button-login {
background-color: white;
border: 2px solid #01BDE0;
border-radius: 4px;
color:#01BDE0;
width: 100%;
height:46px;
vertical-align: middle;
font-size: 1vw;
display: block;
}
This is css for button.
<div class=" pure-u-1 pure-u-md-2-24"><button class="button-login">LOG IN</button></div>
This is the html part.
I tried vertical align its not working.
Try This...
<style>
.pure-u-1 { width:100%;}
.center {height: 500px; background-color: #222;}
.vertical-align {position: relative; top: 50%; transform: translateY(-50%); }
</style>
<div class=" pure-u-1 pure-u-md-2-24">
<div class="center" align="center">
<div class="vertical-align">
<button class="button-login">LOG IN</button>
</div>
</div>
</div>
.video-contant {
position: absolute;
background: rgba(7, 7, 7, 0.52);
width: 100%;
top: 0px;
height: 100%;
display: table;
}
.hctr {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
width: 100%;
overflow: hidden;
}
<div class="video-contant">
<div class="hctr">
<button>onewebbell.com<button>
</div>
</div>
Related
I have a header with links for navigation. Each link is a div, and inside it there is an a link. I want to make each a link fill the vertical and horizontal space of the div.
.TopNav {
position: relative;
border-bottom: 1px solid black;
}
.TopNav-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
background-color: gold;
}
.TopNav-item {
display: inline-block;
width: 100px;
text-align: center;
vertical-align: middle;
display: table-cell;
margin-right: 20px;
border: 1px solid tomato;
height: 72px;
}
.TopNav-a {
background-color: tomato;
color: white;
}
<nav class="TopNav">
<div class="TopNav-wrapper">
<div class="TopNav-item">
<a class="TopNav-a" href="">First</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a " href="">Second</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a" href="">Third</a>
</div>
</div>
</nav>
And a fiddle: https://jsfiddle.net/6rp1canq/
Is this possible?
Change .TopNav-a style in this way:
.TopNav-a {
display: block;
background-color: tomato;
color: white;
height: 72px;
line-height: 72px;
}
You could use flexbox layout:
.TopNav {
position: relative;
border-bottom: 1px solid black;
}
.TopNav-wrapper {
position: relative;
max-width: 1000px;
margin: 0 auto;
background-color: gold;
}
.TopNav-item {
display: inline-block;
width: 100px;
text-align: center;
vertical-align: middle;
display: table-cell;
margin-right: 20px;
border: 1px solid tomato;
height: 72px;
}
.TopNav-a {
background-color: tomato;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<nav class="TopNav">
<div class="TopNav-wrapper">
<div class="TopNav-item">
<a class="TopNav-a" href="">First</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a " href="">Second</a>
</div>
<div class="TopNav-item">
<a class="TopNav-a" href="">Third</a>
</div>
</div>
</nav>
You could just wrap the div in an anchor.
Write the a tag around the div doing <a><div>Test</div></a>
First of all, it's different from others questions because I can't use position: absolute; as I used usually because of my jQuery plugin (I don't use this plugin in the example, but I have to do position: relative; to the inside-table).
JSFIDDLE: https://jsfiddle.net/h8ywumbk/
HTML:
<div id="table">
<div id="inside-table" >
<span>Hello</span>
</div>
</div>
CSS:
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
}
#inside-table span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I'm trying to center the text (not a single line) vertically and horizontally on the tables. Any suggestions?
Just use flexbox
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
#inside-table span {
}
<div id="table">
<div id="inside-table">
<span>Hello</span>
</div>
</div>
Try this:
.table {
display: table;
width: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div class="table">
<div class="td">
text
</div>
<div class="td">
<img alt="" src="http://url style="width: 120px; height: 148px;" />
</div>
</div>
I got it centered like this:
#inside-table span {
position: relative;
top: 50%;
left: 50%;
}
You can always mess with the percentages if you want it shifted one direction or another
How can I center my h1 tag into the middle of my banner without setting a padding?
HTML
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
CSS
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
}
Can you do something with vertical-align: middle; and display: table-cell; etc?
There's several options, I recommend looking through this - https://css-tricks.com/centering-css-complete-guide/
One option would be: http://jsfiddle.net/dtq7fed3/ which uses a line-height on the container that is the same of the height of the banner.
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
text-align: center;
line-height: 500px;
color: #fff;
}
This only works if the banner height is going to remain stagnant
Using transform, you can position in centrally like so: http://jsfiddle.net/otghf6zo/1/
adding this code will position the title in the exact middle of the containing div regardless of size.
h1 {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can use CSS table like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: table;
text-align: center;
color: white;
}
.bannerContainer {
display: table-cell;
vertical-align: middle;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
Or Flexbox like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
I've got this short code:
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2, #div10 {
width: 21px;
height: 100px;
}
#div3, #div9 {
width: 60px;
height: 60px;
}
#div4, #div8 {
width: 70px;
height: 70px;
}
#div5, #div7 {
width: 77px;
height: 77px;
}
#div6 {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">Content2</div>
<div id="div3">Content3</div>
<div id="div4">Content4</div>
<div id="div5">Content5</div>
<div id="div6">Content6</div>
<div id="div7">Content7</div>
<div id="div8">Content8</div>
<div id="div9">Content9</div>
<div id="div10">Content10</div>
</div>
I would like to be able to horizontally align these divs so they are not aligned to the top of my main div but to the center.
I tried it many different ways, such as padding, margin, but i wasn't able to figure out how to do it.
Do you have any idea?
Just add vertical-align:middle; on the rule above:
CSS
#div1 div {
margin: 0% 0,5%;
display: inline-block;
color: white;
border: 1px dotted yellow;
align: center;
vertical-align: middle;
}
DEMO HERE
Hey if you are having some confusion or problem of using vertical-align:middle you can go through below example
I have added a new div inside of div with id div2 to div10 and updated css
#div1 > div {
display: inline-block;
align: center;
margin: 0% 0, 5%;
position: relative;
top: 50%;
}
#div1 > div[id] > div {
transform: translateY(-50%);
color: white;
border: 1px dotted yellow;
}
#div1 {
margin: 0px auto;
width: 620px;
height: 100px;
background-color: black;
overflow: hidden;
text-align: center;
}
#div2 > div, #div10 > div {
width: 21px;
height: 100px;
}
#div3 > div, #div9 > div {
width: 60px;
height: 60px;
}
#div4 > div, #div8 > div {
width: 70px;
height: 70px;
}
#div5 > div, #div7 > div {
width: 77px;
height: 77px;
}
#div6 > div {
width: 85px;
height: 85px;
}
<div id="div1">
<div id="div2">
<div>
Content2
</div>
</div>
<div id="div3">
<div>
Content3
</div>
</div>
<div id="div4">
<div>
Content4
</div>
</div>
<div id="div5">
<div>
Content5
</div>
</div>
<div id="div6">
<div>
Content6
</div>
</div>
<div id="div7">
<div>
Content7
</div>
</div>
<div id="div8">
<div>
Content8
</div>
</div>
<div id="div9">
<div>
Content9
</div>
</div>
<div id="div10">
<div>
Content10
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/9tdzqvot/
The problem is that one div shifts down and one up, why?
I did two double divs, both inline-block and floated to right, the same inside each block.
I'm tried many changings, without any solution.
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
}
.lawyer-avatar {
display: inline-block;
height: 100px;
width: 100px;
float:right;
}
.lawyer-avatar-relative {
position: relative;
}
.lawyer-name-box{
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
height: 2em;
background: rgba(25, 126, 215, 0.9);
color: #fff;
}
.lawyer-name-box span{
padding: 10px 10px 10px 0;
}
.lawyer_description {
background: rgba(25, 126, 215, 0.5);
height: 100px;
width: 100px;
display: inline-block;
clear: right;
}
<div id="lawyer-1" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">short text</div>
</div>
<div id="lawyer-2" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">long text long text long text</div>
</div>
The problem is that one div shifts down and one up, why?
I did two double divs, both inline-block and floated to right, the same inside each block.
I'm tried many changings, without any solution.
You should add a vertical-align: top on your .lawyer-online class.
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align: top;
}
This behaviour is occurring because an inline-block receives by default vertical-align: baseline, which doesn't always align elements in a desired manner.
You can rectify this by explicitly specifying vertical-align: top in your declaration block for .lawyer-online. (Or middle/bottom, they work too as values.)
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align: top;
}
.lawyer-avatar {
display: inline-block;
height: 100px;
width: 100px;
float:right;
}
.lawyer-avatar-relative {
position: relative;
}
.lawyer-name-box{
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
height: 2em;
background: rgba(25, 126, 215, 0.9);
color: #fff;
}
.lawyer-name-box span{
padding: 10px 10px 10px 0;
}
.lawyer_description {
background: rgba(25, 126, 215, 0.5);
height: 100px;
width: 100px;
display: inline-block;
clear: right;
}
<div id="lawyer-1" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">short text</div>
</div>
<div id="lawyer-2" class="lawyer-online">
<div class="lawyer-avatar">
<div class="lawyer-avatar-relative">
<img src="http://wdd.co.il/wp-content/uploads/2015/08/angry-judge-100x100.jpg">
<div class="lawyer-name-box">
<span>name name</span>
</div>
</div>
</div>
<div class="lawyer_description">long text long text long text</div>
</div>
You need to add vertical-align:top
.lawyer-online {
display: inline-block;
width: 200px;
height: 100px;
margin: 10px;
vertical-align:top;
}