nedash
on Apr 27, 2021 11:02 PM
2934 Views
hi
how to put div at the center of page
I want div id="Backheader" to be at the center of the page and when I scroll down it will fix the top to the page
here before I define position:fixed;
div was at the center of page but when I add position:fixed; it went to the left side of the page
I want it be at the center.
I define <div > in page :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="Scripts/bootstrap.min.js"></script>
<style type="text/css">
#BackHeader {
width: 1349px;
background-color: #212121;
height: 50px;
color: white;
position: relative !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 1030 !important;
}
.fix1 {
width:1000px;
height:2000px;
border:1px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="d-sm-inline">
<div class="row justify-content-center text-center">
<div id="BackHeader" class="col-auto">
Back Header
</div>
<div class="fix1"></div>
</div>
</div>
</div>
</form>
</body>
</html>
Best regards
Neda
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
dharmendr
on Apr 28, 2021 03:54 AM
on May 01, 2021 05:32 AM
2
Hi nedash,
Refer below html and css.
HTML
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-sm-inline">
<div class="row justify-content-center text-center">
<div class="fixedContainer">
Back Header
</div>
<div class="otherContainer"></div>
</div>
</div>
<style>
.fixedContainer {
width: 1349px;
height: 50px;
background-color: #212121;
color: white;
position: fixed;
padding: .8em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
.otherContainer {
width: 1000px;
height: 2000px;
border: 1px solid red;
}
</style>
Demo