I am trying to center an element in a bottom-block div, but it stays to the left. Here is my code:
.logo {
display: inline-block;
height: 100px;
width: 100px;
padding-bottom: 10px;
}
.logo img {
box-sizing: padding-box;
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
<div class="bottom_block">
<a class="logo" href="#">
<img src="Style/img/logo_uniqa.jpg" alt="logo">
</a>
</div>
How can I fix this?
Try this:
.logo {
display: block;
padding-bottom: 10px;
}
.logo img {
display: block;
margin: 0 auto;
}
<div class="bottom_block">
<a class="logo" href="#">
<img src="http://placehold.it/100x100" alt="logo">
</a>
</div>
Try adding this css:
.bottom_block{
text-align:center;
}
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 5 years ago.
Basically screen is split in 2 part, left for logo, right for sponsor image.
I would like to vertical align the two image in center of screen. Now images are align on top of screen. I don't understand how to solve. Can you give some hint?
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>
Here is a way you could approach your layout using flexbox:
body {
margin: 0;
}
.app {
display: flex;
align-items: center;
height: 100vh;
}
.app div {
flex: 1;
}
img {
width: 100%;
height: auto;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://unsplash.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://unsplash.it/200x200">
</a>
</div>
</div>
You can use these 2 in your code which will center-center your image.
#logo {
float:left;
width: 50%;
height:100%;
}
#imgLogo {
height:100%;
}
#sponsor {
float:left;
width: 50%;
height:100%;
background:#ffffff;
display: inline-block;
vertical-align: middle;
text-align: center;
}
#imgSponsor {
max-height:90%;
max-width:90%;
display: inline-block;
vertical-align: middle;
}
.app {
position:absolute;
left:0%;
top:0%;
height:100%;
width:100%;
text-align:center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="logo.png">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="http://www.foo.bar/wp-content/uploads/2017/10/foobar.jpg">
</a>
</div>
</div>
or you can use:
background-position: center center:
That is where CSS flex comes very handy:
body {
margin: 0;
}
.app {
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: space-around;
}
#sponsor, #logo {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#imgLogo {
height: 100%;
}
#imgSponsor {
max-height:90%;
max-width:90%;
}
#sponsor a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
<div class="app">
<div id="logo">
<img id="imgLogo" src="https://placehold.it/200x200">
</div>
<div id="sponsor">
<a href="#">
<img id="imgSponsor" src="https://placehold.it/200x200">
</a>
</div>
</div>
I have an absolute slider div including images and some arrows, When I add another div, I expect it appear after last div (that is absolute), but it places behind absolute div, I know it's because absolute position is beyond box flow, and I just want to know how to put new div after last absolute div, widout giving margin-top?
HTML code:
<div id="next">
<i class="fa fa-5x fa-angle-right" aria-hidden="true"></i>
</div>
<div id="slider">
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.jpg" alt="">
</div>
</div>
<div id="prev">
<i class="fa fa-5x fa-angle-left" aria-hidden="true"></i>
</div>
<div id="advertises">
</div>
Css code:
#slider{
position: relative;
margin-top: -17px;
}
.slide{
position: absolute;
width: 100%;
height: 400px;
}
.slide img{
width: 100%;
height: 400px;
}
#next, #prev{
width: 70px;
margin-top: 150px;
cursor: pointer;
position: relative;
z-index: 100;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
border-radius: 50%;
}
#next{
margin-right: 25px;
float: right;
}
#prev{
margin-left: 25px;
float: left;
}
#advertises{
width: 50%;
height: 300px;
border: 1px solid #101010;
display: flex;
}
Jsfiddle
When you use absolute positioning you lose the ability to relate that to other elements. That is, you can place a element relatively to other when the other is absolute.
You should try to look for another solution that fits your intention. I don't see the reason to not use a "normal" positioning.
One way is to wrap the slider, then add overflow:auto and height:400px
.wrapper {
overflow: auto;
height: 400px;
}
#slider {
position: relative;
margin-top: -17px;
}
.slide {
position: absolute;
width: 100%;
height: 400px;
}
.slide img {
width: 100%;
height: 400px;
}
#next,
#prev {
width: 70px;
margin-top: 150px;
cursor: pointer;
position: relative;
z-index: 100;
background-color: rgba(255, 255, 255, .5);
display: flex;
justify-content: center;
border-radius: 50%;
}
#next {
margin-right: 25px;
float: right;
}
#prev {
margin-left: 25px;
float: left;
}
#advertises {
clear: both;
width: 50%;
height: 300px;
border: 1px solid #101010;
display: flex;
}
<div class="wrapper">
<div id="next">
<i class="fa fa-5x fa-angle-right" aria-hidden="true"></i>
</div>
<div id="slider">
<div class="slide">
<img src="images/1.jpg" alt="">
</div>
<div class="slide">
<img src="images/2.jpg" alt="">
</div>
<div class="slide">
<img src="images/3.jpg" alt="">
</div>
</div>
<div id="prev">
<i class="fa fa-5x fa-angle-left" aria-hidden="true"></i>
</div>
</div>
<div id="advertises">
</div>
below is my code, the thumb Divs are starting from left but how can I make them centralized?
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>
There's not much point in floating the divs if you want to center them. Instead make them inline-block elements and use text-align:center on the parent:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">
<a href="1.html">
<img src="1.jpg">
</a>
</div>
<div class="thumbs">
<a href="2.html">
<img src="2.jpg">
</a>
</div>
<div class="thumbs">
<a href="3.html">
<img src="3.jpg">
</a>
</div>
</div>
My favorite method is to add a text-align: center; to the parent element, then use display: inline-block; instead of float: left;
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
width: 100px;
height: 100px;
border: 0;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs"><img src="1.jpg"></div>
<div class="thumbs"><img src="2.jpg"></div>
<div class="thumbs"><img src="3.jpg"></div>
</div>
You can use inline-block to thumbs instead of float left like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbs {
display: inline-block;
border:1px solid #000;
width: 100px;
height: 100px;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
If you want to conserve your floating behavior you should add an container to your thumbs, also using float dont forget to clearfix the container like:
.thumbsPanel {
border: thin black dashed;
width: 800px;
height: 500px;
margin: 0 auto;
text-align: center;
}
.thumbsWrap {
display: inline-block;
overflow: hidden;
}
.thumbs {
float: left;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 1em 1em 0;
}
<div class="thumbsPanel">
<div class="thumbsWrap">
<div class="thumbs">a</div>
<div class="thumbs">b</div>
<div class="thumbs">c</div>
</div>
</div>
I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!
I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.
Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}
Here's my html. The problem I am having is that the 'box1' divs do not even display and the 'nav' bar extends itself. I have no idea why...
<div id="nav">
<ul>
<li><a class="selected" href="link1">Home</a></li>
<li>Services</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div> <!--#nav-->
<div id="content">
<div class="wrapper">
<div class="box1">
TEXT
</div> <!--#box1-->
<div class="box1">
IMAGE
</div> <!--#box1-->
</div> <!--#wrapper-->
</div> <!--#content-->
And the CSS...
#nav {
background-color: #000;
}
#nav ul {
margin: 0 auto;
width: 80%;
}
#nav li {
display: inline;
}
#content {
margin: 0 auto;
width: 80%;
min-width: 720px;
}
.box1 {
width: 40%;
height: 100px;
float: left;
position: relative;
padding-left: 6.33%;
}
Suggestions?
.box1 {
width: 40%;
height: 100px;
position: relative;
padding-left: 6.33%;
border: 1px solid #000;
margin: 0 auto;
}
Preview >> http://jsfiddle.net/XJA4T/