I can do percentages of left margin easy, but I can't get this div to center no matter what method I use.
Check it out here: http://www.fahrenheit-hvac.com/thank-you/
I'm trying to get the social div I created to center so as to remain responsive, but all of the solutions I've found online don't work.
Any help is greatly appreciated.
Jason C.
Try this:
#socialInPage {
text-align: center;
margin: 0;
}
#socialInPage a {
display: inline-block;
}
Set a width on the containing div (div#socialInPage). I used 275px, and it seemed to work. Then set the left and right margins to auto.
width: 275px;
margin: 0 auto;
So long as the text-align of parent elements is set to center, then this method will center elements on your page.
Related
I am new to bootstrap and web stuff in general. I am having trouble with an application I am developing. What I would like is to have a top bar with buttons that do things and below that a setup where 20% left is filled with a div and the other 80% is filled with a map.
I can get the split using col-md-2 and col-md-10 just fine but the map does not extend to 100% height (I would say it sits about 75%. I have tried many different things offered up here and other places to solve the 100% height but nothing seems to work.
I have put together this in way of an example of what I am currently trying. I stripped away most of the css as none of it was working for me.
http://www.bootply.com/0xx9zBH3Ke
if you can offer assistance I would appreciate it.
**edit
I realized my bootply didnt illustrate my problem very well so I tossed the file at the link below to better show whats going on.
http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html
I have tried a couple of solutions but it still fights me by miss aligning things (mostly by placing the leftpane as its own row)
Try adding a 100% height to the html or body elemement. Then wrap your 20-80% width divs in a wrapper div and also set that to 100% height.
here is your solution
Bootply
#row {
display: table;
}
#leftpane, #map {
float: none;
display: table-cell;
vertical-align: top;
}
Maybe you can use like this
.center-element{
min-height: 100%;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Only problem is IE :(
I am working on a landing page, and this is how it looks at the moment: https://a00baa69ca400642fad5c0cead23ef741b6473f7.googledrive.com/host/0B9XEA2QvXeaQZmdGcW1kVk9Kajg/main.html
Here is the wireframe: http://static.squarespace.com/static/52228ba5e4b02da2a90a906c/t/529bc6f9e4b09eb80192c1ae/1385940737162/Good%20Collab.jpg?format=1000w
For the landing page, I was able to get the three photos to align regardless of the width of the viewer's monitor size by setting up max-width and margin to auto.
** Here is the CSS used for the three photos:**
.three-containers {
max-width: 1080px;
margin: auto;
display: block; }
However, I wasn't able to set the section below the three photos to center side by side (i.e. the How it Works part and the form). I tried applying similar code as I did to the three photos - I set a div up for each of them (one div for How it Works and another for the form)
div class="two-texts" for the HOW IT WORKS PART and another div class="two-texts" for the FORM PART
and CSS:
.two-texts {
max-width: 900px;
margin: auto;
display: block;
clear:left;
}
Problem is now the form is aligned under the How it Works part when I actually want it side by side with the How it Works part (see link to wireframe at top).
Can anyone point out what the issue might be? Thanks.
Welcome to StackOverflow!
In HTML, some elements default to stacking horizontally and some vertically. divs are designed to stack vertically by default because they have their display property defaulted to block. Try the following CSS style to see what happens to the three divs with images:
.three-containers > div {
display: inline-block;
max-width: 300px;
}
(the max-width is there because of the images those divs contain)
Similarly, to make the two divs stack horizontally, try the following CSS:
#bodytext, .form {
display: inline-block;
}
Let me know if that helps you get on the right path!
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/
I have a problem that I've replicated in various browsers.
I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/. The wrapper has a 1px border and 5px padding. The image inside is sized to 100% width.
For some reason, though, there is more than 5px between the bottom of the image and the bottom of its wrapper. See how the padding does appear to be equal on all sides of the images? There seem to be 3 pixels added from... somewhere. Firebug doesn't let me know where from.
How can I get rid of the space? I can't use absolute positioning to fake the padding because I'm not yet sure I'll always know the exact height of the image.
Help is much appreciated!
It is a known issue. Try:
img {
display: block;
}
It's a line-height. Images are rendered as inline-block elements by default. The line-height makes sure that following text does not stick to the image like here:
<img...><br>foo
Both these fixes are useful, depending on the situation:
.imgContainer { line-height: 0; }
img { display: block; }
No extra spacing if you add img {display:block}
http://jsfiddle.net/lexy0202/uxMu9/2
Like I guessed it is the display attribut:
#container {
display:block;
width: 50%;
margin: auto;
margin-top: 100px;
}