Here is the link to a site I am working on for a friend - http://jayclarkephotography.com/
I am trying to center the logo. I have tried various ways, but am new to making websites, so I think I am missing something.
On the a inside the header, add the following CSS:
display: block;
width: 340px;
margin: 0 auto;
You might want to ajust the padding of the header, because the logo is not dead center.
You can acheive this through CSS, tell the browser you want auto margins on the left and right, add this to the image tag
style="margin:0 auto;"
Related
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.
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 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 quit new to html and css and hope someone can help.
With help of w3 schools (http://www.w3schools.com/CSS/css_image_gallery.asp) I created an simple gallery.
With this the images are put in the left upper corner. I want to put the images more in the central of the page.
Is there a way to easily do this?
Wrap everything in a div with an id of container. Then add #container { width: 100px; margin: 0 auto; replacing 100px with how wide you want the gallery to be.
you can see my jsFiddle here http://jsfiddle.net/fcZQV/ where I posted the HTML and CSS of my page. You can see the result also in http://fiddle.jshell.net/fcZQV/show/ for better viewing example.
The #sidebar and #feed must come close and all of the page in the center of screen.
How can I do this? I tried margin:0 auto; but nothing...
Thank you for your help.
You should also set the width of the page. Then it will center inside that width.
margin: 0 auto; width: 980px;