asked on

not able to align center and middle on a html bootstrap page

Hi Experts,

I am not able to align vertically middle. I had tried margin: 0 auto, display:inline block, text-align:center, but not able align vertically center. It is not aligning center inside the row. I am trying an application for ipad pro
Landscape version. Hence I am trying the col-md-12. Please find attached html and css. Please help me in resolving this issue.

With Many thanks,

Bharath AK

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Stolen</title>
  </head>
  <body>
    <div class="banner container-fluid col-mid-12">
    <div class="row" style="margin:0 auto;text-align:center; width:260px; height:70px"> 
       <span style="display:inline-block">	
         <button class="middle-buttons btn btn-primary-outline" type="button" onclick="location.href='screen2.html';">
			Listen  &nbsp;  &nbsp;  &nbsp;  &gt;					
		</button>
		</span>
	</div>
	</div> 
	<script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>	
  </body>
 </html>

Open in new window

css is

button {
    background: none;
    border: 1px solid white;
    position: relative;
    left: 150px;
    top: 80px;
	padding:15px;
}

.banner{
	  background-image: url("../images/stolen-background.png");
	  height:1500px;
	  width:2048px;
	  margin:0 auto;
	  display:flex;
	  justify-content:center;
	  flex-wrap:wrap;
	  flex-direction:row;
	  align-items:center;
	  align-content:center; 
	  align-items:center;	  
}

#tabs {
   margin:0 auto;	
}

tab-pane{
   max-width: 960px;   
}

tab-pane p{
   color:rgb(255,255,255);
}

.tab-data{
	width:1040px;
	height:300px;
	background-color:#E4E2CD;
}
.nav {
	margin: 0 auto;	
}

.nav-pills {
	margin: 0 auto;	
}
	
.nav-item a.active{
	background-color:#E4E2CD;
	margin-bottom:0px;
}

a.active div div.number{
	background-image:url('../images/speaker1.png');
	background-repeat:no-repeat;
	background-color:#E4E2CD;
	background-position:center;	
    margin-bottom:0 px;	
	height:100px;
}

a.active div.detail-content {
	color:grey!important;
	font-weight:bold;
}

.nav-pills .nav-link.active {
	background-color:#E4E2CD;
    width:230px;
    height:230px;
    text-align:center;
    margin:0 auto;	
}

.nav-link{
	width:220px;
	height:210px;
	text-align:center;
	margin:0 auto;
}

.nav-item {
    margin:20px;
	background-color:#9B8C61;
	width:230px;
	height:175px;
	margin: 20 auto!important;
	text-align:center;
}

.tab-pane{
	margin:20px;
}

.number {
	width:100px;
	height:100px;
	margin:0 auto;
	text-align:center;
}

.middle-buttons{
	background-color:transparent;
    color:#CFCDB4;
    border: 2px solid #CFCAB7;
	width:250px;
	height:65px;
    margin : 0 auto;
	font-size:32px;
	text-align:center;	
	vertical-align:middle;
	diplay:inline-block;
}


.blinker {
	-webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s;
    -o-animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Open in new window

I am attaching both files for reference

index.html style.css

Please help me in resolving this ussie

With Many thanks,
Bharath AK

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

coder

ASKER

Hi Julian,

Now I am able to center the button on this page. Thanks for providing me the sample code.

With Many thanks,
Bharath AK

Julian Hansen

You are welcome.