I am building a website using bootstrap, which has some (minimal) content on top (basically title, subtitle, and a navigation bar). I would like to be able to center a div both horizontally and vertically. The contents of this div will be something small, like a login or search widget.
What is the recommended way to do this in Bootstrap and CSS? Of course I want it to also look "good" when opened on a phone. The content on top will be rather minimal, so on a small screen, it's unlikely the top and center will touch. This is different from other questions in this style, because I also have some content on the top. I guess I could try to follow one of those answers, and "absolutely" place the content on the top, but somehow this doesn't seem too clean. Are there better solutions?
Kristof Hi there. A search would have probably given you a answer on how to do this.
He is a Fiddle that will do what you want to do here.
.centerthis {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Related
Dear all geniuses out there,
I'm building a website in wordpress, however I'm not an expert in it.
I'm looking to make logo bigger and put it between the header and the first part of the slider (with same position on the right as now, however way down on the menu so that half part of logo is within the menu and half part within the first part of the slider, making it not affect the height of the header menu)
The website in question is the following: http://www.ildottoredellepiante.it
I'm sure this is possible as I've seen it on few website, does anybody can help me with the answer?
Do you have something like this in mind?
Screenshot with modified CSS
To achieve this, just add this code to the id #site-logo in the style.css of your wordpress template:
#site-logo {
float: left;
position: absolute;
top: 12px;
}
position: absolute helps, that the size of the logo container does not affect the height of the header.
top: 12px helps to adjust the vertical position of the logo. You can alter that value to change the exact position of the logo.
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
I would like to create a page with a logo that is always horizontally dead centre and upon opening the page before anything is clicked on is also vertically centred.
I have created the page with the logo centred using simple margins:
margin: auto;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
This works great with a full page background, but I would like to have a number of small 50px square divs to the right of the logo that will have icons for login, mail, info and if someone clicks on those divs they expand to show login fields etc.
Now the problem I have is I am very used to using 2/3 column layouts but I have no idea how to keep the logo dead centre if the div next to it expands.
(I dont mind if the logo moves up the page as the div next to it expands or whether the logo stays dead centre and the div expands downwards.)
This does not have to be compatible with anything before IE9
I may not fully understand your question but have you considered displaying the logo as a background-image:?
If that's not the solution you're looking for you should consider placing the logo in the first column of a table, and the boxes on the right in a second column of that table. Then vertically and horizontally center that table.
If you don't want to use a table you can achieve something similar with divs.
I've set up my blog, doopist.com, using tumblr.
I'm trying to line up a twitter Follow button and Facebook Like button with my blog's header logo image. Currently, the Twitter icon is aligned at the top of the top banner while the FB button is closer to being centered. I am attempting to vertically center the buttons similarly to how the logo is centered.
I don't know much CSS and have tried to make a div style with vertical align middle but that caused the tumblr icon logos (random post, archives, etc.) to bump down to a new line, which is not desired.
I was curious if anyone had suggestions on how to vertically center the Twitter and FB buttons vertically. Thanks so much for your time and help.
Few CSS changes
#header, #header .inner { height:48px; position:relative; }
On your iframe add preferably in a class:
position: absolute;
left: 200px;
top: 10px;
On your span holding facebook:
position: absolute;
left: 365px;
top: 15px;
Again preferably in a class.
You really don't need the extra spans around each iframe. Just add a class to each iframe to specify the styles.
I'm trying to get some text between two images. The images are positioned correctly, but there are some weird design issues that are cropping up.
Current Page (web page)
Design Plan (jpg)
What I'm trying to figure out is this:
Background must stop before the right edge of the right image (the girl)
Background must extend the height of the right image
Vertical bar underneath left edge of right image.
Text wrapping before vertical bar
Bars to left of bottom text in center
Any help would be appreciated!
I'd advise against splitting the image up, as Aiden suggests. This is messy and not exactly a modern way to go about it. Try something like this:
.top-pic {
float: right;
margin-top: -200px;
}
Change the margin-top assignment to however high you want the image in pixels. The only issue left is to scale the width of the top-text div to accommodate the image. One way to do this would be to set padding-right: 250px; or so to .top-text h1 and .top-text h2.
This is a bit wrong
.top-pic {
position: absolute;
top: -5.7em;
right: -1.5em;
z-index: 1;
}
Cut this image into 2 images (one in the header next to the tabs, and one in the content). Stuff is floating underneath because of your z-index.
In your CSS. What you want is a pretty basic fixed 3-col layout with the text in the middle. I will point you here:
http://layouts.ironmyers.com/
http://www.csszengarden.com/
That is how CSS layouts are done.
If you move the top-pic above your logo and change the styling you can get a similar effect to what you want.
<div class="top-pic">
<img src="index2_files/girlbird.png">
</div>
<div class="logo">
<img src="index2_files/logo-center.png">
</div>
CSS Changes
.top-pic {
float: right;
position: relative;
top: -50px;
right: -25px;
}