I want to create a header area that has previous and next arrow buttons all the way on the left and right while having some header text centered in the middle of the header area. The trick is that I also want all three elements within the header area to be vertically centered as well, regardless of whether the header text element is so long that it causes it to have a greater height than the arrow links or not.
Here is a rough sketch of what I am trying to achieve:
In the top version, the arrows (the black boxes) are taller than the header text, however, in the bottom version, the text is taller than the arrows. In all cases, I want everything vertically centered, and for the header text to be horizontally centered (which is not shown in my image).
At the moment, this is the best HTML/CSS I have come up with, but I know something is missing, and I'm not sure what it is.
HTML:
<div class="container">
<h1>Header text</h1>
</div>
CSS:
.container {
display: table;
}
.prev, .next {
background: #000;
display: table-cell;
height: 50px;
vertical-align: middle;
width: 20px;
}
.prev {
float: left;
}
.next {
float: right;
}
h1 {
display: table-cell;
margin: 20px;
text-align: center;
vertical-align: middle;
}
Can anyone please offer some advice on how I should change my HTML/CSS to get what I want? Thanks.
How about making the container position:relative and positioning the arrows absolutely?
.container{position:relative;}
.prev, .next {
background: #000;
height: 50px;
width: 20px;
position:absolute;
top:50%;
margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
text-align: center;
padding:0;
margin:0;
margin:0 20px;
}
Demo at http://jsfiddle.net/gaby/M4crZ/1/
Original attempt did not center the text vertically...
Try this one better
.container{position:relative;display:table;border:1px solid #ccc;}
.prev, .next {
background: #000;
height: 50px;
width: 20px;
position:absolute;
top:50%;
margin-top:-25px;
}
.prev {left:0;}
.next {right:0;}
h1 {
text-align: center;
padding:0 20px;
margin:0;
display:table-cell;
vertical-align:middle;
}
Demo at http://jsfiddle.net/gaby/M4crZ/3/
Related
I want to align text in middle of the screen. I have content and button within a div element that I want to display in the middle of the screen.
Right now, the text appears below the div element.
I have three banner and and 3 content.
I want to align the text in middle in both vertical and horizontal.
jQuery(document).ready(function() {
var headerheight = jQuery("#header-wrapper").height();
jQuery(".view-home-banner .views-row-1 .panell img").css("margin-top",headerheight+"px");
jQuery(".banner_img img").addClass("img-responsive");
});
#navigation
{
display:none;
}
.feed-icon
{
display:none;
}
/*banner*/
#home_banner .home-banner {
position: relative;
width: 100%;
color:black;
}
.banner_description p { font-weight: bold;word-spacing:5px;margin:1%}
.banner_link {
font-size: 28pt
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.banner_description {
font-size: 33pt;
font-weight: bold;
color: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
.banner_link a {
color: white;
text-transform: uppercase;
font-weight: normal;
background-position:1%;
padding:0.5% 1.5%;
background-color:#5d145f;
font-size:17pt;
opacity:0.8;
}
.background-image-formatter {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 100vh;
}
.home-banner-background
{
position:absolute;
width:100%;
height:auto;
border-radius:2%;
opacity:0.9;
}
/*.banner_img > img{
/*float: right;
max-width: 100%;
height: auto;
min-height: 100vh;
}
.banner_img > img {
max-height: 1024px;
min-width: 1024px;
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="views-row views-row-1 views-row-odd views-row-first classtest">
<section class="panell" style="height: 543px;">
<span class="field-content banner_img"><div class="background-image-formatter" style="background-image: url('data:image/jpeg;base64,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')">
</div>
</span> <div class="home-banner-background">
<div class="field-content banner_description"><p>We built great software products</p>
</div> <div class="field-content banner_link">Explore</div> </div>
</section>
</div>
If you want to align a div in the middle of the screen, you can set margin : 0, auto; and width:50%; for the CSS of the div.This is a famous CSS trick.Btw, your question is confusing and please reduce your question content to minimum.
Edit: Based on the comment that was left, you are trying to align horizontally and vertically.You can do the following:
div {
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;
position: absolute;
}
This will dynamiclly align your element.From Mozilla Developers:
translatex()
The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.
translateX(tx) is a shortcut for translate(tx, 0).
translatey()
The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.
translateY(ty) is a shortcut for translate(0, ty).
See more about the transformation function here.
If you want to make text center horizontally then you can use text-align:center in case you want to do it vertically you can use line-height property. you have given height:543px to section so you need to write
line-height:543px ;
here is updated fiddle https://jsfiddle.net/1mh33zz7/
Ok, so i have been looking around for someone with the same problem as me, but didn't find any(almost 100% shure some of you guys are going to link to to one).
I have managed to center a div inside a div which again is inside footer(pretty shure overkill). But my problem is that i have centered two images with two lines of text connected to them. I want the text to be displayed vertically centered(with the image in mind), and not in the bottom right corner of the images, like now.
Pretty shure it's something simple, but here is a link:
http://jsfiddle.net/rdsdmuw8/
<footer>
<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
+47 930 98 907
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
Bryter-pedersen#hotmail.com
</div>
</div>
</footer>
*{
margin: 0px;
padding: 0px;
color: #fff;
}
footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}
#sosial {
text-align: center;
vertical-align: middle;
}
#sosial a{
list-style-type: none;
text-decoration: none;
}
In order to vertically align the img elements next to the anchors set vertical-align: middle for both of the elements.
#sosial img,
#sosial a {
vertical-align: middle;
}
In order to vertically center all the containing elements within the footer, you can use the table-cell/table approach.
#footer {
height: 100%;
width: 100%;
display: table;
}
#sosial {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Updated Exmaple
I removed the inline CSS styling in the example. You can use img:nth-of-type() to apply the margin to the second element. Just throwing options out there.
#sosial img:nth-of-type(2) {
margin-left:50px;
}
if you know what is the height you want for the images you can use, in my example is 50px:
#sosial a {
list-style-type: none;
text-decoration: none;
line-height: 50px;
display: inline-block;
height: 100%;
vertical-align: middle;
}
I'm trying to make that one div in a navbar gets a top-padding when I hover it. My problem is that all my divs makes the same effect (they all go down), and I just want one of them to make this (the one I'm hovering), and I want the others to stay in the same place, with the same height, without any changes.
The current situation is this one: http://jsfiddle.net/3S8ZB/1/
This is my current CSS:
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
}
div:hover{
padding-top:2em;
}
What do you suggest?
Demo
inline-block elements are vertically bottom alligned by default. Add vertical-align: top;
css
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
vertical-align: top; /* add this */
}
div:hover {
padding-top:2em;
}
Not sure if understood becuse it looks like you are very close to that.
Padding on the hovered item and keeping the siblings vertically aligned to the top.
http://jsfiddle.net/2UvSa/
div {
height: 2em;
width: 6em;
border-radius: 5px;
background-color: orange;
display:inline-block;
vertical-align: top;
transition: padding .5s ease-in;
}
div:hover{
**padding-top:2em;**
}
Put vertical-align: top; on div.
JSFiddle Demo
I'm trying to make a header for my web page with one element in the middle of the header, and one right-justified in the header.
The only ways I could think of doing it was:
Using float - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
float: right;
}
Using absolute positioning - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10px;
}
The problem is that with both of these methods, the social links/images no longer are vertically aligned to the header, but rather are hugging the top of the page despite me setting them to inline-block with a height of 100%, and vertical-align: middle. (source of my reasoning for trying this vertical align method)
With the float method, there appears to be the additional problem of the centered element not actually being horizontally centered within the header, but rather placed next to the social links and centered within its own div which is not what I'm looking for.
Any pointers on how I could achieve the desired result of having a horizontally centered element with right-justified elements all inline and vertically centered would be much appreciated!
one solution is to add relative to the Header Wrapper and positioning the social links properly using the absolute top value.
Updated JSfiddle
#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}
I'm having trouble forcing the text to stay relative within its div and at the same height as the image. So when the browser is resized, it doesn't overflow. I'm doing this as I'm creating a responsive webpage. I hope I've explained this clearly. Please check out my http://jsfiddle.net/DMnhB/1/
The html is as follows:
<div id="postd"><img
src="http://www.tntmagazine.com/media/content/_master/42628/images/barack-obama.jpg">
<span>
Text Here
Text Here
Text Here
</span>
</div>
And the CSS:
#postd{
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img{
width:40%;
}
#postd span{
float:right;margin-left:1px;
position: absolute;
background-color: red;
}
Here is a start, try the following CSS:
#postd {
width:100%;
padding-bottom: 5%;
background-color: blue;
padding-top:6%;
border-bottom: 1px dotted #ccc;
}
#postd img {
width:40%;
display: inline-block;
vertical-align: top;
}
#postd span {
display: inline-block;
margin-left:1px;
background-color: red;
}
You can see how it looks at: http://jsfiddle.net/audetwebdesign/DMnhB/2/
I used inline-blocks to fix the overflow problem and vertical-align: top to place
the top of the image inline with the top of the text block.
You need to provide some additional feedback before I make any other adjustments.