how to center the button on the screen resizeing? - html

Question

.codrops-top {
line-height: 30px;
font-size: 13px;
background: #fff;
background: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
z-index: 9999;
position: absolute;
width: 100%;
top: 0;
left: 0;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
font-weight: 900;
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
text-decoration: none;
}
.codrops-top a:hover {
color:#12836d;
cursor:pointer;
text-decoration: none;
}
.codrops-top span.right{
float: right;
}
.codrops-top a{
color:black;
}
.fa{
padding:0 5px;
}
.codrops-top span a.btn {
padding: 9px 38px;
line-height: 20px;
}
.codrops-top span a.btn-primary {
color: #fff;
background-color: #5bbc2e;
border-color: #5bbc2e;
}
#media only screen and (max-width: 767px){
.codrops-top{
text-align: center;
}
.codrops-top span.right{
text-align: center;
float:none;
}
}
#media screen and (min-width: 1338px){
.largeScreen {width:100%;text-align:center;}
.largeScreen span {display:inline-block;}
.hide{
display: none;
}
}
<div class="codrops-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3 col-md-3 col-sm-3 hide">
<a href="">
<strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>[phone]
</a>
</div>
<div style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6 hide">
<a href="">
<strong><span><i class="fa fa-book"></i></span>Blog</strong>
</a>
<a href="">
<strong><span><i class="fa fa-trophy"></i></span>Career</strong>
</a>
<a href="">
<strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
</a>
<a href="">
<strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
<span class="right">
<a href="">
Client Area
</a>
</span>
</div>
</div>
</div>
</div>
</div>
now i want the client area button in the center on size of 1338px screen and all the things should be hidden only the button should be in the center.
i have tried it but the button is not coming in center it is coming on the left side.

Answer 1

.codrops-top {
line-height: 30px;
font-size: 13px;
background: #fff;
background: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
z-index: 9999;
position: absolute;
width: 100%;
top: 0;
left: 0;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
font-weight: 900;
text-align: center;
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
text-decoration: none;
}
.codrops-top a:hover {
color:#12836d;
cursor:pointer;
text-decoration: none;
}
.codrops-top a{
color:black;
}
.fa{
padding:0 5px;
}
.codrops-top span a.btn {
padding: 9px 38px;
line-height: 20px;
}
.codrops-top span a.btn-primary {
color: #fff;
background-color: #5bbc2e;
border-color: #5bbc2e;
}
#media only screen and (max-width: 767px){
.codrops-top{
text-align: center;
}
.codrops-top span.right{
text-align: center;
float:none;
}
}
#media only screen and (max-width: 1338px){
#hide{
}
.codrops-top{
text-align: center;
float:right;
}
}
<div class="codrops-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="hide" class="col-lg-3 col-md-3 col-sm-3">
<a href="">
<strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>[phone]
</a>
</div>
<div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
<a href="">
<strong><span><i class="fa fa-book"></i></span>Blog</strong>
</a>
<a href="">
<strong><span><i class="fa fa-trophy"></i></span>Career</strong>
</a>
<a href="">
<strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
</a>
<a href="">
<strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="right">
<a href="">
Client Area
</a>
</span>
</div>
</div>
</div>
</div>
</div>

Answer 2

I assume you have included bootstrap to your code.
<style>
#media screen and (min-width: 1338px){
.largeScreen {width:100%;text-align:center;}
.largeScreen span {display:inline-block;}
.hide {display:none;}
}
</style>
<div class="col-lg-3 col-md-3 col-sm-3 largeScreen">
<span>
Client Area
</span>
</div>
Avoid using same id's multiple times in your code. I can see
id="hide" twice. You can use class="hide" instead.
I would suggest renaming the hide class if you want to hide the elements only above 1338px as the bootstrap hide class hides the contents at all resolutions.
You missed mentioning display:none in the CSS for the hide.
Remove float:right from the span. text-align:center won't have any effect unless you remove the float css property.
I've added the class largeScreen as the classes col-lg-3 col-md-3 col-sm-3 will make the width of the div to 25% and not full width of the screen.
Hope this answer helps you solve your problem.

Answer 3

.codrops-top {
line-height: 30px;
font-size: 13px;
background: #fff;
background: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
z-index: 9999;
position: absolute;
width: 100%;
top: 0;
left: 0;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
font-weight: 900;
text-align: center;
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
text-decoration: none;
}
.codrops-top a:hover {
color:#12836d;
cursor:pointer;
text-decoration: none;
}
.codrops-top a{
color:black;
}
.fa{
padding:0 5px;
}
.codrops-top span a.btn {
padding: 9px 38px;
line-height: 20px;
}
.codrops-top span a.btn-primary {
color: #fff;
background-color: #5bbc2e;
border-color: #5bbc2e;
}
#media only screen and (max-width: 767px){
.codrops-top{
text-align: center;
}
.codrops-top span.right{
text-align: center;
float:none;
}
}
#media only screen and (max-width: 1338px){
#hide{display:none;
}
.codrops-top{
text-align: center;
float:right;
}
}
<div class="codrops-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="hide" class="col-lg-3 col-md-3 col-sm-3">
<a href="">
<strong>Your Tech Friend </strong><span><i class="fa fa-mobile"></i></span>[phone]
</a>
</div>
<div id="hide" style="text-align:center;" class="col-lg-6 col-md-6 col-sm-6">
<a href="">
<strong><span><i class="fa fa-book"></i></span>Blog</strong>
</a>
<a href="">
<strong><span><i class="fa fa-trophy"></i></span>Career</strong>
</a>
<a href="">
<strong><span><i class="fa fa-sitemap"></i></span>Site Map</strong>
</a>
<a href="">
<strong><span><i class="fa fa-rocket"></i></span>Request a Quote</strong>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<span class="right">
<a href="">
Client Area
</a>
</span>
</div>
</div>
</div>
</div>
</div>