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/
Related
Please see:
https://codepen.io/alanvkarlik/pen/vdWyrd
I'm lost atm. My website has images that show up when you hover over the bold text links.
Right now they are showing up with original size, sometimes stretching beyond the screen.
I'd like them all to have the same width - say 80% of the screen width. Where and how do I edit that?
The main block with those links is centered with following divs:
<div id="wrapper">
<div class="table-container">
<div id="content">
and their css:
#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.table-container {
height:100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
display:table;
text-align: center;
}
#content {
vertical-align:middle;
height:100%;
display:table-cell;
max-width:100%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw;
font-family: 'Vesper Libre', serif;
text-align: justify;
color: #fff;
}
Basically I used this set up to make sure the block of links is always in the centre of the screen (both width and height wise).
Any help will be appreciated !
You're already using the vw unit, so just use that for your image:
.hover_link img {
width: 80vw;
height: auto;
}
I also suggest you remove display: none; from .hover_img span as this will nullify your opacity transition (you can add pointer-events: none; to cancel any mouse event on the span and its contents).
I'm trying to create a "tile" (square block) with content centered perfectly in the middle of it.
Here's the HTML
<div class="tile-facebook">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
And the CSS
.tile-facebook{
width:175px;
height:175px;
background: #3b5998 ;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification{
font-size:80px;
font-weight:bold;
padding:10px 0px;
}
I've got the text in the middle of the block, however I want it to be directly in the middle with the same padding from the top and bottom. Thoughts?
You might not set the height , but use a pseudo or extra element to draw your square from any width of your boxe.
vertical padding at 100% + inline-block is a way to draw a square and add content in its middle.
<div class="tile-facebook">
<div class="wrapper">
<h5>
Facebook
</h5>
<div class=" tile-notification ">
4
</div>
<h4>
notifications
</h4>
</div>
</div>
.tile-facebook {
width:175px;
background: #3b5998;
text-align: center;
border-radius: 10px;
border-style: solid;
border-color: #ccc;
border-width:1px;
color: white;
}
.tile-notification {
font-size:80px;
font-weight:bold;
}
.tile-facebook .wrapper * {
margin:0;
}
.tile-facebook:before {
padding-top:100%;
content:'';
}
.tile-facebook:before,
.wrapper {
display:inline-block;
vertical-align:middle;
}
http://jsfiddle.net/cnq82/
some explanation about vertical % padding or margin : http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top
So, (hope it makes it a bit more clear : ) )
If you give a vertical padding of 100% its height will be equal to width of parent.
If you want height to be taller of 20px you can do : padding:100% 0 20px 0 ; or padding:20px 0 100% 0;
If you want a box with a ration of 4:3 , just do padding-top:75%; or padding:50% 0 25% 0;.
pseudo or extra element can be floatting, or inline-block for vertical alignment.
You do not need to set a width in parent's CSS.
This fix tequires that the contents height never changes, and you need to add another <div>.
<div class="tile-facebook">
<div class="center">
<h5>Facebook</h5>
<div class="tile-notification">4</div>
<h4>notifications</h4>
</div>
</div>
And add the CSS:
.title-facebook {
position: relative;
}
.center {
position: absolute;
top: 50%;
margin-top: -[half height];
left:0;
width: 100%;
}
Where [half height] is half the height of the .center div.
Add margin: -30px; to your CSS here:
.tile-notification {
font-size:80px;
font-weight: bold;
padding: 10px 0px;
margin: -30px;
}
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/
I have a div in a list item which is floated right. The div positions it self at the top right corner of the list item. Is it possible to position it in the middle-right without the use of padding or margins?
---------------
DIV
---------------
Needs to be:
---------------
DIV
---------------
I made a bunch of assumptions and didn't bother check this first.
li {
height: 32px;
}
li div {
width: 100%;
line-height: 32px;
text-align: center;
}
You could use the table cell method.
<div class="wrap one">
<div class="inner-wrap">
<div class="inner">Test</div>
</div>
</div>
With the CSS defining a parent as a table, then table-cell with vertical align:
.wrap .inner {
background: white;
float: right;
}
.wrap.one {
display: table;
width: 100%;
}
.wrap.one .inner-wrap {
display: table-cell;
vertical-align: middle;
}
Demo: http://jsfiddle.net/vFqSC/
If you want the div to take up the full space you could position the div this way:
li div {
float: right;
height: 100%;
}
or if you don't want it to take up the full space
li div {
position: absolute;
right: 0px;
top: 50%;
height:80%;
margin-top:-40%; // Half of height
}
If you have a hard coded list height and div height:
li { height: 50px; }
li div {
position: absolute;
right: 0px;
height:30px;
top: 10px;
}
There are many ways to do this, you should provide more information on how you want it to behave and look
Yes, you can, but margin or padding is the preferred method, but you could use relative positioning and assess a amount along on vertical axis. fiddle: http://jsfiddle.net/De4CV/1/
div {
width:200px;
height:200px;
background:#333;
}
div p {
font:1em normal Futura, sans-serif;
color:#f5f5f5;
text-align:right;
position:relative;
top:90px;
}
<div class="div">
<p>Hello there!</p>
</div>
Like the example above. I've found some helpful script with the a small img which I do like however I don't know how to get the padding about the title so the line doesn't go straight through.
h3.line {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(../images/line.jpg);
background-origin: padding-box;
background-position: center;
background-repeat: repeat-x;
background-size: auto auto;
display: block;
margin-bottom: 20px;
}
Which shows this.
Any suggestion or ideas?
You can have a 1px dot image which you can place as a background on the H3. Then have a span element in between which have a background on.
CSS:
h3 {
background: url(images/dot.png) left center repeat-x;
padding: 10px;
text-align: center;
}
h3 span { background: #fff; display: inline-block; padding: 10px 15px; }
HTML:
<h3><span>About</span></h3>
You can put a <span> for example in your <h3> and make it have the same background as your <h3> but without the line so the <span> effectively overlaps the <h3>.
You can say this to your span:
span {
display: block;
margin-left: auto;
margin-right: auto;
}
to make it center. You can add width and height to it too. line-height helps place your text to the middle vertically.
If you want to spare images than you can use text-decoration: line-through; to draw a line through your text.
Here is a solution using the CSS border property instead of an image.
the html:
<h2>
<span>This is a test</span>
<div></div>
</h2>
And here is the CSS:
h2 {
text-align:center;
background-color:#EFEFEF;
line-height:26px;
position:relative;
}
span {
background-color:#EFEFEF;
padding-right:5px;
padding-left:5px;
position:relative;
z-index:2;
}
h2 > div {
border-bottom:1px solid grey;
position:relative;
z-index:1;
top:-13px; /* half the line-height of the containing element */
}
A fiddle Demonstration
The <div> is placed inside the heading element, and positioned half-way up by settings its top position to one-half the height of the heading element, which is the headings line-height. z-index is used on the span and div so that the span gets a higher stack order than the div and obscures the (border) line where there is overlap.
I just stumbled upon another way of achieving this.
h1
{
position: relative;
padding: 0 26%;
}
h1:before,
h1:after
{
width: 25%;
background-color: rgba( 0, 0, 0, .5 );
content: '';
position: absolute;
top: 0;
bottom: 0;
}
Taken from: http://osvaldas.info/blog/background-independent-css-bars