i'm building a bootstrap site and i have divs in the center of the page that i am trying to make centered. I can't for the life of me figure it out. Anyone have any idea why it won't center? I've tried:
margin: 0 auto;
text-align: center;
in almost ever element and i can't get it going. Feeling frustrated here. Here's a link to the site so you could see what i'm talking about http://bit.ly/1wYQDD1
Here's what part of the code looks like, you can inspect it at the site to see more:
<section class="no-margin" id="main" style="background-image:url(/GulflifeRealty.com/images/images/<%=img%>); height:650px; background-size:cover; background-position:0 -210px; background-repeat:no-repeat;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div>
<a href="http://matrix.swflamls.com/Matrix/Public/IDXSearch.aspx?count=1&idx=f25b59c&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]"><div class="homeBox" style="background-image:url(/GulflifeRealty.com/images/images/<%=listings%>);">
<h3>See our Listings</h3>
</div></a>
<a href="http://matrix.swflamls.com/Matrix/Public/IDXSearch.aspx?count=1&idx=b03d59b&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]"><div class="homeBox" style="background-image:url(/GulflifeRealty.com/images/images/<%=mls%>);">
<h3>Search the MLS</h3>
</div>
</div>
</div>
</section>
You aren't able to center the two <div>'s using text-align: center because you're using float: left to make them appear inline. You need to to use display: inline-block instead of float: left, like this:
.homeBox {
display: inline-block;
float: none;
}
And then set the text-align property of the container <div> to center, like this:
row > div {
text-align: center;
}
It works perfectly:
Related
I warned you, I can be a little vague
Anyway, what I am after are those pages that fill the whole screen, but if you scroll down and you come to a different section ( some specific content or just a footer), it breaks away from the previous content by having a different background.
Sorry, if I sleep on it, I can maybe come up whith a better explanation and/or an example page.
Does that style have a name and how is it done? If it needs to be responsive?
thanks
Yes. It's simple to do. Setup like so, and customize to your heart's content.
<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>
<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>
CSS:
.container {
width: 100%;
text-align: center;
}
.wrapper {
margin: 0px auto;
width: 70%;
text-align: left;
}
The parent (container) <div>s will stretch to 100% page width. The child (wrapper) <div>s will stretch to 70% of their parents (or, you can set this to fixed pixel dimensions and change based upon screen dimensions) and will be centered. You apply decorative backgrounds to the parent .container like:
#header {
background: #ff0000;
}
#footer {
background: #000;
}
#content {
background: url(img/bg_pattern.gif);
}
#feature_area {
background: url(img/hero_feature_img.jpg) top center no-repeat;
}
I have a link and a button, each in their own div, and then wrapped in a shared div. The link is centered on the page, and the button is aligned to the right side of the page. I want to keep this, but have the two items on the same line. How can I do this?
Use floats on your divs, something like this:
<div class="wrapper">
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
and for css:
.wrapper {
width: 100%;
}
.center {
float: left;
margin-left: 50%;
}
.right {
float: right;
}
http://jsfiddle.net/uK5hM/
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
I need to make a menu that looks like this:
The upper entries need to have a right margin of (lets say) 20px.
Problem arises, when I add the sub-menus, especially like the red one with the «large Menu-Entry». The top menu needs to stay in place and all the sub-menus need to be centered under that top menu. But either the top-entry is enlarged (which makes the green part shift to the right) or the sub-entries aren't positioned at the center of the top-entry...
As the menu-entries are dynamic, I can't predict how wide they are and thus I can't apply any math.
Also - the sub-entries are only visible, if the user is on the according page (means - the green part only shows «Menu1» if the user is on the red page)
I «could» use some javascript to do it after the page loaded, but I'm trying to avoid that.
I tried all sorts of stuff, including negative margins and whatnot - but nothing seems to work... Any ideas?
[edit]
some html here - tried to fumble around like crazy with no results (except the one from Brad, but that one doesn't work with IE)
<div class="center">
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
<div class="menu-container">
<div class="menu-title">Title 1</div>
<div class="menu-items">
Testomat<br />
Yo, this is a long text
</div>
</div>
</div>
CSS:
.menu-container{
width: 100px;
float: left;
}
.menu-items, .menu-title{
text-align: center;
}
If you don't care about IE: Have you tried using display:table-cell?
You could try something like:
<div class="menu-container">
<div class="menu-title">
Menu1
</div>
<div class="menu-items">
<div class="menu-item">large menu item</div>
<div class="menu-item">sub</div>
<div class="menu-item">sub</div>
</div>
</div>
With CSS:
.menu-container {
display : table;
width: 100px;
}
.menu-title, .menu-items {
display : table-cell;
width: 100%;
text-align: center;
}
Naturally, the content within the table-cells will wrap to 100px.
My first approach uses different html mark-up to your own, but gives the visual effect you you're looking for with, perhaps, a slight increase in semantics:
html:
<dl>
<dt>Title One</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
<dl>
<dt>Title Two</dt>
<dd>Testomat</dd>
<dd>Yo, this is a long text</dd>
</dl>
css:
dl {
width: 100px;
float: left;
position: relative;
text-align: center;
color: #0f0;
}
dl:nth-child(odd) {
color: #f00;
}
Demo of the above at JS Fiddle.
Edited, to add the following:
On looking at your posted mark-up, and applying the css:
.menu-container {
width: 100px;
float: left;
text-align: center;
overflow: hidden;
color: #0f0;
}
.menu-container:nth-child(odd) {
color: #f00;
}
JS Fiddle demo
I'm not sure why you're experiencing difficulties. Admittedly, at the moment, I'm only able to test on Chrome and IE 8 (Win XP), but the above seems to work. Am I missing something important in your problem description?
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>
This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>