Seen at http://www.gerddagne.com
I want to center that gallery logo. I have tried this link but cannot get the centering to work correctly - Centering brand logo in Bootstrap 3 Navbar
My css is very outdated :(
You can also center like this - add to your .pull-right
what this will do will center that entire div inside its parent div. So in your case you also have the pinterest and facebook social media links inside it. they will be included in the centering.
CSS
position:absolute;
left:50%;
transform:translateX(-50%);
For the start if it is okay to customize your Bootstrap, you can remove the Pull Right Class from it. And give it a custom class (something like center-logo)
.center-logo{
margin: 0 auto important;
width: 230px;
}
Usually the margin: 0 auto; works when the width is known. That means 230px is a variable which is the width of the content within the div encapsulating the logo and your social media icons (facebook and pinterest). However as you noticed this centers your social icons too. Maybe you move them to another div and apply the pull right class to that div
Related
I am now using the Envo Magazine Theme for Wordpress. I switched themes recently. I have a wider post area to work with. However, that means for older posts with smaller images, the images are floating on the left and text is wrapping around the images.
I don't want any text wrapping around images.
How do I force all post images to be center-aligned and not floating?
I tried forcing the post area to be a smaller width and that takes care of the overflow text, but that defeats the purpose of switching to a wider theme. I can't seem to find the right code to select all post-attached images. Please advise. Thank you!
Here is one example of a code I tried. I wanted to force all post images to be center-aligned with no text overwrap.
.single-entry-summary img {display: block; margin: 0 auto;}
It looks like you can't simply select all images on the page, because they are not build with the same structure. You can prevent the text from wrapping around the first image by removing the class pibfi_float_left from the span that is surrounding it. Or you can edit the class and remove the float: left.
For the other pictures, you need to remove the class alignleft from the surrounding div. Or you can edit the class and remove the float: left.
To center the images, you also need to add display: block to the surrounding span:
.single-entry-summary span {
display: block;
}
.single-entry-summary img {
display: block;
margin: 0 auto;
}
Important note: For all images except the first one, you need to adjust the width of the attachment divs (which have an id starting with attachment), otherwise they won't be centered. You can do it like that:
.single-entry-summary div[id^='attachment'] {
width: 1000px !important;
}
I am trying to center this JS/jquery/ajax app screen here, such that no matter what size the user's screen is, it will all remain centered. Right now it is all left-aligned:
http://www.funtrivia.com/html5/indexc.cfm?qid=361927
No matter what I try, it simply does not center. When I do manage to center the outermost div, all of the inner stuff gets messed up.
your html is built wrong. everything seems to be positioned absolute and has a left/top defined. It does not help that your body tag has width: 790px;
This can be solved with just css. Try removing all the positioning styles from the markup and set #game to be margin: 0 auto (the centering trick)
Remove the width settings on your body tag
Use "margin: 0 auto" on your gameheader and game divs
and set your gameheader div and game div to use position:relative
A quick Google Search reveals How to Centre a DIV Block Using CSS
Use the following CSS where #content is the id of your main div element
#content {
margin-left: auto ;
margin-right: auto ;
}
The technique works because when both margins are set to auto, web browsers are required by the CSS standard to give them equal width.
jsFiddle
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
Im working on a website template and i want to make photo on the top.
Well I used the position absolute then I set top to -50px and left to -50px.
It work perfectly but I have one issue the scroll bar appear on bottom.
This is the css for the div :
#moon {
background-image:url('img/moon.png');
width:289px;
height:289px;
position:absolute;
top:-150px;
left:-160px;
overflow:hidden;
}
Give the body overflow-x: hidden
Also notice that on small screens there will be no horizontal scrollbar(!), unless you'll handle it specifically with responsive CSS.
I couldn't think of the right wording for this question, but here is my problem:
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around.
For example, I have a navigation div floating on its own on the top left corner of the page.
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
This link from "A List Apart" covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queries because they allow you to apply styles based on certain characteristics of the browser or device.
How to keep code in center on zooming?
Center the code on zooming?
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}