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%;*/
}
Related
I'm trying to implement a basic image viewer using HTML and CSS, where the image remains centered in the page, except for when it's too big to fit. In that case, the user should be able to scroll to see the rest of the image with no margins. If only one dimension is too big to fit, the other dimension remains centered. There is nothing else on the page other than the image.
However, the size of the image needs to be specified by a scaling factor so that I can enlarge or shrink it relative to its original size. This means I can't use an explicit width/height in pixels or size it relative to the size of the page. I've tried adjusting its transform css property, i.e. transform: scale(2.5) but that generally causes the top of the image to be cut off. I've also tried doing this by making the image's display property by set to inline-block and its height property set to auto so that I can set its width to the percentage I want it to be scaled by, but I can't figure out how to keep it centered on page as described in the above paragraph.
How can I accomplish this? So far I've tried around a dozen different ways of centering an element on the page, and none of them result in this exact behavior I'm shooting for. For example, I've used flexboxes to keep the image centered horizontally and vertically, but as soon as it grows too tall to fit, (again) the top of the image gets cut off.
You can use flexbox and center with margin to obtain this:
body {
min-height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
}
<img src="https://picsum.photos/500/500?image=1069" >
And in case you don't want scroll apply max-height/max-width:
body {
height:100vh;
margin:0;
display:flex;
}
body > img {
margin:auto;
max-width:100%;
max-height:100%;
}
<img src="https://picsum.photos/500/500?image=1069" >
there are several ways to achieve horizontal and vertical alignment. However, they are usually done separately and in different ways. You can have a look at W3Schools, they do a few tutorials on each:
W3Schools Alignment Tutorial
Also if you are willing to use bootstrap (makes everything much easier, especially centering) you can have a look at the following link:
BootStrap Grid System Tutorial
Below is a quick method on for centering. Credit goes to: This Post with some minor improvements from myself.
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
text-align:center;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
I'm setting a background image on a page, but for some reason, the image is ONLY showing if I had a height. I don't want to set a fixed height though.
Any thoughts?
<div class="thinkBPG content"></div>
CSS:
.thinkBPG.content {
background: url(./home-blueprint.png) no-repeat center center fixed;
}
Ignore this.
I needed to remove the center center fixed.
I told you it was something silly.
The issue is because the content within that div is floated, so you need to tell the browser you want that div to contain it's floated contents. There are a few ways to handle this...you can float that div, you can put overflow on it, or you can use a clearfix solution.
Simplest way without introducing a lot of new code is to simply take off the height, and then add
float: left;
width: 100%;
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 would like the logo and the image slider to center on my responsive site.
Basically, the logo and the slider are next to each other on a full size screen. I can make the slide disappear when the site isn't wide enough and the logo shrinks.
What I want to do is make the logo and the slider center once they are no longer next to each other.
Please help: http://ranchocordovaeventscenter.com/
Thank you,
Matt
You can center the child elements of hgroup tag by setting margin: 0 auto;text-align:center on the hgroup
this will cause the contents to be centered within that div
Put the logo and slider in a div and give it a fixed width. If this div has #inner id, the solution will be:
#inner {
width:1000px;
display:block;
}
the given answers will only work if you use both of them, centring with margin: 0 auto; only works if a width is specified, and having a div just display as a block will not change the appearance.
Try the css:
div {
width: 500px;
margin: 0 auto; }
along with other styling, and it should center
I am developing an html page on Windows platform. I find when the resolution (or size, in pixels) of browser (display) is larger than the page size, the page will be aligned to the left of the browser, and I want to align the page to the center (middle) of the browser when the page size is smaller than browser.
Any ideas how to implement this and how to find the root cause why aligned to left? The html page is big and not convenient to paste html code here.
thanks in advance,
George
First of all, you'll want to wrap your page content in a block (this block will be centered):
<div id="body">
<!-- your page content here -->
</div>
Then you'll want to style it as being centered. Due to a little disparity in how Firefox and IE handle centering a block, you'll have to do 2 things to center this block.
1. Set the body as centering everything (for IE):
body {
text-align: center;
}
2. Set the left and right margins of your interior block as 'auto'; and
3. Since centering text inherits to its child nodes, you want to set it back to left-alignment (unless, you do want all your text to be centered.. blah!):
#body {
margin: 0px auto;
text-align: left;
width: 800px; /* set this width to how wide you want your content to be */
}
Any ideas how to implement this and
http://dorward.me.uk/www/centre/
how to find the root cause why aligned to left?
… because that is the default.
<style>
body
{
width:800px;
margin:auto;
}
</style>
you simply need to add, text-align: center; to your body to cover legacy browsers and add:
text-align: left;
margin: 0 auto;
to your first container div ... this will be centered horizontally in all browsers, no matter how old.