I have this big logo on the home page which should be aligned to center. I managed to center it horizontally, but not vertically. The only solution I could think of was setting the top-margin to 20% but it seems that this is not a good solution for a responsive design. What could be the proper solution to this?
Here is the HTML:
<section id="home">
<div class="container">
<img id="logo2" class="img-responsive" src="img/logo2.png" >
</div> <!--end container-->
</section> <!--end home-->
And here's the CSS:
#logo2 {
margin: 0 auto;
margin-top: 20%;
}
And here is the link to the home page itself: http://skiest.ragne.me/.
Thank you for your help.
If you have a declared height for the element, you can use absolute positioning on it by wrapping it in a parent container:
.parent {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
height: 100px; /* Or whatever height it is */
}
.child {
display: inline-block;
}
I think you should add to #home style "display:table;" and to "container" class "display:table-cell;vertical-align:middle;". For more flexible add "width:100%;height:100%" to #home
You can do this via CSS:
.container {
line-height: 200px;
}
.container img {
vertical-align: middle;
}
Related
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
Right now I have...
<header id="background-color">
<img src="header_image.gif" alt="header">
<h1>Header</h1>
</header>
and the relevant CSS is...
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
This puts the image above the h1 obviously. What I'd like to do is left-justify the image and have the h1 centered relative to the whole page (not just the remaining space).
And when I say left-justify, I mean relative to the body and header which are set to be 70% with auto margins. I've got no idea how to do this, I'm totally new to web design.
Thanks.
You can add margin-right: -100%; to image, so header text will not touch the right edge of image. and will align center in header. check this fiddle
header {
background-color: #0072bc;
width: 70%;
text-align: left;
padding: 10px;
}
Look at the jsfiddle
http://jsfiddle.net/EScBs/
A quick Answer.. May need to fine tune...
Add wrapping div...
<header id="background-color">
<div id="container">
<img src="Beach_Party.jpg" alt="header">
<h1>Header</h1>
</div>
</header>
Try to use relative positioning and absolute positioning of the child elements
<style>
header {
background: #0072bc;
width: 70%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#background-color {
background: #0066CC;
width: 100%;
}
img {
float:left;
text-align:left;
position: absolute;
top:0;
left:0;
}
h1 {
z-index:10;
}
#container {
position: relative;
}
</style>
It worked for me.. Adjust it to suit your case.. Hope it helps!
I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>
I have the following markup code in my page:
<div id="root_img" style="width:100%;height:100%">
<div id="id_immagine" align="center" style="width: 100%; height: 100%;">
<a id="a_img_id" href="./css/imgs/mancante.jpg">
<img id="img_id" src="./css/imgs/mancante.jpg" />
</a>
</div>
</div>
And it does not appear as I expected, it looks like that:
But I wanted to get this result:
How can I center this image horizontally and vertically?
Here is a tutorial for how to center the images vertically and horizontally in a div.
Here is what you are looking for:
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #999;
}
.wraptocenter * {
vertical-align: middle;
}
<div class="wraptocenter">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.
Horizontal, I would use a margin, as suggested.
So if your image was 100x100px you'd end up with.
<img id="my_image" src="example.jpg">
<style>
#my_image{
position: absolute;
top: 50%;
margin: -50px auto 0;
}
</style>
Image in a div horizontally and vertically.
<div class="thumbnail">
<img src="image_path.jpg" alt="img">
</div>
.thumbnail {
height: 200px;
margin: 0 auto;
position: relative;
}
.thumbnail img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
There are two aspects you need to address. First aspect is the horizontal alignment. This is easily achievable with the margin: auto applied on the div element surrounding the image itself. DIV needs to have width and height set to image size (otherwise this will not work). To achieve vertical center alignment you need to add some javascript to the HTML. This is because HTML height size is not known on the startup of the page and might change later on. The best solution is to use jQuery and write the following script:
$(window).ready( function() { /* listen to window ready event - triggered after page is being loaded*/
repositionCenteredImage();
});
$(window).resize(function() { /* listen to page resize event - in case window size changes*/
repositionCenteredImage();
});
function repositionCenteredImage() { /* reposition our image to the center of the window*/
pageHeight = $(window).height(); /*get current page height*/
/*
* calculate top and bottom margin based on the page height
* and image height which is 300px in my case.
* We use half of it on both sides.
* Margin for the horizontal alignment is left untouched since it is working out of the box.
*/
$("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"});
}
HTML page which is showing the image looks like this:
<body>
<div id="pageContainer">
<div id="image container">
<img src="brumenlabLogo.png" id="logoImage"/>
</div>
</div>
</body>
CSS attached to the elements looks like this:
#html, body {
margin: 0;
padding: 0;
background-color: #000;
}
#pageContainer { /*css for the whole page*/
margin: auto auto; /*center the whole page*/
width: 300px;
height: 300px;
}
#logoImage { /*css for the logo image*/
width: 300px;
height: 300px;
}
You can download the whole solution from our Company homepage at the following url:
http://brumenlab.com
This solution is for all size images
In this the ration of the image is also maintain.
.client_logo{
height:200px;
width:200px;
background:#f4f4f4;
}
.display-table{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.display-cell{
display: table-cell;
vertical-align: middle;
}
.logo-img{
width: auto !important;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="client_logo">
<div class="display-table">
<div class="display-cell">
<img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>
</div>
</div>
You can set size of
.client_logo
accourding to your requirement
Try something like this:
<div style="display:table-cell; vertical-align:middle">
"your content"
</div>
using margin-top
example css
#id_immagine{
margin:0 auto;
}