logo
down
shadow

Why is left:auto; right:auto not centering a div?


Why is left:auto; right:auto not centering a div?

By : Asad Malik
Date : November 17 2020, 01:00 AM
hope this fix your issue I am trying to create a image slider that needs to be centered horizontally. In order to make the height working I need to set the position of the slider to absolute. To center the slider I tried to set the left and right to auto like you see below. , adding this will align it horizontally center
code :
#slider {
 position: absolute;
 width: 80%;
 height: 50%;
 left: 50%;
 transform: translatex(-50%);
}


Share : facebook icon twitter icon
Centering divs and images, margin:0px auto 0px auto not working?

Centering divs and images, margin:0px auto 0px auto not working?


By : Ryan Kraft
Date : March 29 2020, 07:55 AM
Hope this helps Have you tried? text-align: center;
http://jsfiddle.net/Eqed4/
Margin: 0 auto; not centering because there are divs to the left and right

Margin: 0 auto; not centering because there are divs to the left and right


By : rosswritescode
Date : March 29 2020, 07:55 AM
will help you Add text-align:center to the #intro (as your inner content acts like inline) and add float:left to your #intro .circle.blue.
Example
Bootstrap 3 auto centering and auto padding the whole page by default?

Bootstrap 3 auto centering and auto padding the whole page by default?


By : Yagnik Gondaliya
Date : March 29 2020, 07:55 AM
may help you . You need to remove the overall "container" to container-fluid that you have at the start of your document because that is what is containing and making it center.
code :
$('.orgSelector').dropdown();
			$('.orgSelector').tooltip();
.acLogo {
	background-image : url("http://placehold.it/250x150");
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
  max-width: 100%;
  height: auto;
}
div.user-summary {
  margin: 10px auto;
}
div.user-summary > img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 5px;
}
div.user-name {
  margin: 15px 0 0 0;
  font-style: italic;
  display: block;
}
div.user-status {
  font-weight: bold;
}  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
	      <nav class="navbar navbar-default">
	        <div class="container-fluid">
	          <div class="navbar-header">
	            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	              <span class="sr-only">Toggle navigation</span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	            </button>
	            <a class="navbar-brand acLogo" style="height:auto; width:50%;" href="/"></a>
	          </div>
	          <div id="navbar" class="navbar-collapse collapse">
	            <ul class="nav navbar-nav">
	           	              <li><a href="/features"><b>FEATURES</b></a></li>
	              <li><a href="/compare"><b>COMPARE US</b></a></li>
	              <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
	              <li><a href="/company"><b>FOOBAR</b></a></li>
	              <li><a href="/docs"><b>DOCS</b></a></li>
	            </ul>
	            <form class="navbar-form navbar-right" action="/app/dashboard/search" method="POST">
		            <ul class="nav navbar-nav navbar-right">
						<li><button type="button" class="btn btn-success">Sign up</button></li>
						<li><a href="/app/dashboard">
							<button type="button" class="btn btn-link">Sign in</button>
						</a></li>
		            </ul>
		       	</form>
	          </div>
	        </div>
	      </nav>
	    </div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Margin: 0 auto; not centering div with float:left

Margin: 0 auto; not centering div with float:left


By : JackOfAllTrades
Date : March 29 2020, 07:55 AM
hope this fix your issue float: left is designed to move an element to the left and let the content that follows it move up beside it.
If you don't want that. Don't use float: left.
centering CSS: margin-left and -right auto, but funny results

centering CSS: margin-left and -right auto, but funny results


By : Brendan Keogh
Date : March 29 2020, 07:55 AM
wish helps you margin auto has worked for me in all cases with fixed width otherwise use
http://css-tricks.com/centering-in-the-unknown/
Related Posts Related Posts :
  • Jquery and create html on the fly
  • jQuery Validation not validating on button click
  • Jquery Draggable/Droppable appending multiple divs
  • jQuery selector not working properly. Possible Sizzle bug?
  • enable anchor in twitter bootstrap modal
  • jQuery keydown : Wait for previous event to finish
  • why magnific popup ajax box closes if clicked on content
  • JQPlot pie charts "jqplotDataClick" event fires multiple times
  • Show div as the page scrolls on div height
  • Keypress event for ajax call does not work
  • responsive/fluid jQGrid with Twitter Bootstrap
  • IE10 does not seem to fire load event
  • Remove tipTip tool tip
  • jquery datepicker changing unavailable dates in one instance
  • TableTools plugin export buttons are not working
  • Prepopulate jquery token input textbox
  • Open a fancybox link with ajax
  • Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"
  • TR alternate background colour with unequal number of TD
  • DATATABLE jQuery TH and TD alignment
  • Jquery UI Convert Select's to Range Slider
  • Change text in text field according to link that has been clicked
  • Animate addClass + removeClass transitions?
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org