I am trying to create a responsive version of my portfolio website and I am nesting my logo image and title inside the header tag. The older version used divs to float the logo and title on the left and right sides of the header.
Here is where I got stuck at when I tried to space the img and h1 without using divs.
The title is placed at the top right corner, but I don't know how to vertically center both img and h1 without using the older methods.
Layout as of Now
HTML
<header>
<img src="images/logo.png" width="203" height="41" alt="logo for Design415.com" class="logo">
<h1 class="pagetitle">PORTFOLIO TITLE</h1>
</header>
CSS
header {
position: relative;
width: auto;
max-width: 900px;
height: 60px;
margin: 0 auto 20px auto;
background-color: #333333;
overflow: hidden;
}
.logo {
position: absolute;
left: 0;
margin: 0;
}
.pagetitle {
position: absolute;
right:0;
font-family: 'Century Gothic', Helvetica, sans-serif;
font-size: 1.40em;
font-weight: bold;
margin: 0;
color: rgb(240, 240, 240);
}
To center the text vertically add line-height: 60px:
.pageTitle {
// Your styles here
line-height: 60px;
}
To center the image vertically, change the margin on top:
.logo {
// Your styles here
margin-top: 9px;
}
Here is a working JSFiddle.
Related
I want to add a scrollbar to a <div>. On the x-axis i have an overflow which I want to be shown.
But when I add overflow-y: auto to the style it cuts out the x-overflow aswell.
Here is an example: Jsfiddle
Is there a way to do that?
EDIT
Heres the code of the situation. I have a sidebar which open/closes. And the button needs to have a -margin to be visible when the sidebar is closed. You can see it in action right here: Website with sidebar
<div class="sidebar right">
<!-- Sidebaredge with button to toggle -->
<div style="width: 100px; height: 50px; margin-top: 16px; margin-left: -100px; position: relative; font-size: 10px">
<div id="openclosebutton" class="open-close-button"></div>
</div>
And here is the code from the css-file:
.sidebar.right {
top: 0;
right: 0;
bottom: 0;
width: 20%;
padding-left: 20px;
padding-right: 20px;
background-color: #659DBD;
box-shadow: 0px 0px 2px 0px #FFFFFF;
}
.sidebars > .sidebar {
font-family: 'Josefin Slab', serif;
position: fixed;
color: white;
font-size: 20px;
text-align: left;
}
I need the sidebar to be scroll-able because of different resolutions and the open-close button to be visible for the sidebar.
Why not just add both an explicit x & y overflow?
overflow-y: auto;
overflow-x: visible;
I believe this happens because setting the one overflow direction only still sets a new block formatting context Here's more info about it.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I'm trying to align a text, horizontally and vertically, inside a div box (with background color) but I'm not being able to do it.
I've searched online and margin: auto, text-align: center aren't doing the work.
Any tips?
Check FIDDLE.
HTML
<div id="services"><div class="holder container clearfix">
<div class="bgtop"><span class="top">Corte cabelo + Afiar</span></div>
<div class="bgprice"><span class="price">10€</span></div>
</div></div>
CSS
#services .holder .bgtop{
background-color: #27ae60;
height:50px;
width:200px;
z-index: 1;
}
#services .holder .bgprice{
height:50px;
width:90px;
background-color: #272727;
z-index: 1;
}
#services .holder span.top{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.000em;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
#services .holder span.price{
color: white;
font-style: italic;
font-weight: bold;
font-size: 1.500em;
z-index: 2;
text-align: center;
}
Here is a common approach used for vertical/horizontal centering.
BASIC EXAMPLE HERE
div {
background: red;
width:100px;
height: 100px;
display:table;
}
div > span {
display:table-cell;
vertical-align:middle;
text-align:center;
}
Basically, the parent element's display is changed to table. Add in a child element, in this case a span element to wrap the text. The span should have the properties display:table-cell/vertical-align:middle for vertical centering. Then text-align:center is simply for horizontal centering.
Here is an example using the styling you had.
You can change just your CSS to this (no HTML changes):
div{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
text-align: center;
line-height: 100px;
}
The text-align is self-explanatory. The line-height forces the text to the center by matching the height of a single line to that of the div. You will have to adjust it to your needs each time.
JSFiddle
There are different ways. Here is one:
HTML:
<div>
<span>magix!</span>
</div>
CSS:
div {
text-align:center;
display:table;
}
span {
display: table-cell;
vertical-align:middle;
}
Fiddle
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have a to most probably simple problem.
My page has a background color and contains a container, then a contentcontainer to put the page in the middle. Now this content container has a different background color, but a small space where we see the original page background color is visible at the top and bottom.
The CSS file is like this:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
margin: 0 auto;
}
The body looks like this:
<div id="container">
<div id="contentcontainer">
<p>Some content</p>
</div>
</div>
What do I have to to to make this small space disappear.
I have already tried to add 0 top padding to the container div and body.
After a few answers I have discovered that margin: 0; the body css takes out the space at the top. I still have the same kind of space at the bottom though.
To show people what I mean:
NOW THIS IS THE FIX:
CSS:
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E0EBED;
margin: 0;
}
#container {
width: 100%;
}
#contentcontainer {
background-color: #FFFFFF;
width: 1000px;
height: 100%;
margin: 0 auto;
}
I added margin: 0; to body and height: 100%; to content container. If you have the same problem do not forget to add the margin: 0; to the body as it will not work without that.
Thanks to all that answered this question and helped me solve this!
Add this to your CSS:
* {
margin: 0;
padding: 0; }
body has padding by default. Make it 0px by -
body{padding:0px;}
I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}
CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.
#bannerText {
line-height: 60px;
}
Is one way..
I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.
Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.