I am trying to center an image within a div and I used the display:table & display: table-cell method. It is centered but it is off by a few pixels from the top. What can I do to correct this?
CSS
html, body {
width: 100%;
height: 100%;
}
body,html {
margin: 0;
padding: 0;
color:#ffffff;
text-align: center;
}
#wrapper{
text-align: left;
width: 940px;
margin: 0 auto;
margin-top: 22px;
background-color: #ffffff;
overflow: hidden;
}
header {
width: 908px;
height: 76px;
display: table;
border-style:solid;
border-top-width: 16px;
border-bottom-width: 16px;
border-top-color: #ffffff;
background-color: #cccccc;
}
#headerdiv { display: table-cell; vertical-align: middle; margin: 0; height: 28px; }
HTML
<div id="wrapper">
<header>
<div id="headerdiv"><img src="logotest.gif" height="28" width="180" alt="test"></div>
</header>
</div>
Add
img {
vertical-align:middle;
}
jsFiddle example
Related
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
This is Html page and I can't make the image .loader centered and at the bottom of .please-wait. How to make it centered and at the bottom?
HTML File
<div id="container">
<main id="main" class="welcome">
</main>
<aside id="aside-right">
<img alt="Welcome" src="../images/panel.png" />
<div class="please-wait">
<h3>Please Wait</h3>
<img class="loader" src="../images/loading.gif" alt="Loading">
</div>
</aside>
</div>
</body>
CSS File
#container
{
/* border: 2px solid black; */
width: 100.6%;
margin: 5px;
white-space: nowrap;
overflow: hidden;
position:relative;
}
#main
{
Position:absolute;
/* border: 2px solid blue; */
float: left;
margin: 3px;
width: 65%;
display: block;
top: 25%;
}
#main.welcome
{
test-align: center;
}
#main.welcome h2
{
width: 58%;
margin: 0 auto;
text-align: center;
word-break: normal;
word-wrap: break-word;
white-space: pre-line;
/* border: 2px solid red; */
}
#aside-right
{
position:relative;
max-height:200px;
height:200px;
border: 2px solid green;
float: right;
width: 27%;
}
#aside-right img
{
position:relative;
width:100%;
float:right;
}
.please-wait
{
position:absolute;
border:2px solid red;
height: 100%;
width: 100%;
}
.please-wait h3
{
position: relative;
/* border:2px solid blue; */
margin: 15px;
top:30px;
text-align: center;
}
.please-wait img
{
position: relative;
margin: 15px;
text-align: center;
max-width: 20%;
border:2px solid blue;
}
Can you please help me to center it and make it at the bottom of .please-wait
JSFiddle
Can you please help me to center it and make it at the bottom of .please-wait
CSS3 Flex can be good idea for manipulate image and flexible layout....
html,
body {
height: 100%;
margin: 0;
}
.main {
height: 100%;
border: 1px dotted blue;
position: relative;
min-height: 500px;
}
.container {
height: 100%;
padding: 0 20px;
}
.image {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image img {
align-self: flex-end;
}
<div class="main">
<div class="container">
<div class="image">
<img src="http://unsplash.it/300/220?random">
</div>
</div>
</div>
Use this fiddle
Added another class for panel image and this...
.please-wait img {
position: relative;
margin: 15px;
text-align: center;
padding: 0 50px;
margin-top: 110px;
padding-bottom: 0;
border: 2px solid blue;
}
I have 4 divs.
1 - Divs '.left' and '.right' should be 150px min. - > OK
2 - Divs '.middle1' and '.middle2' should get the remaining with
divided by them. -> NOT OK
Why do I have a blank space between the '.middle2' and '.right'?
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
float: left;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1"></div>
<div class="middle2"></div>
<div class="right"></div>
</div>
Not sure how do you want to display. Instead of playing around with floats, you can use display:flex to achieve the same.
Check the below snippet
.container {
display:flex;
}
.left {
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1">m1</div>
<div class="middle2">m2</div>
<div class="right">right</div>
</div>
Hi this is not the best way to do this.
You should make a div with three sections of it and divide the middle one into two sections.
So basically the structure you need is
Div > 3 columns and then the middle column has two columns conatined.
However, here is a quick fix for your code :
- Apply float:right to .middle2
- Fix the width percetage for .middle1 and .middle2
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 31%;
}
.middle2 {
float: right;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 31%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
I'm having trouble with creating a nested divs like in the attached image.
Image
I would love if some one can show me how.
.demo-container {
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
text-align: left;
display: inline-block;
vertical-align: top;
}
.header {
display: block;
padding: 15px 25px 0;
overflow: hidden;
}
<div id="warp">
<div class="header">
New Alerts
</div>
<div class="demo-container">
</div>
</div>
You need to set height and width to your parent #wrap , see full snippet below:
snippet
* {
box-sizing: border-box
}
#wrap {
height: 200px;
width: 200px;
text-align: center;
}
.header {
display: block;
padding: 15px 25px;
background: blue;
color: white;
}
.demo-container {
width: 100%;
padding: 30px;
border: 1px solid #e2e4e7;
background-color: #f5f7f8;
display: inline-block;
vertical-align: middle;
color:black;
}
<div id="wrap">
<div class="header">
New Alerts
</div>
<div class="demo-container">
X Alerts
</div>
</div>
In my fiddle, There are two buttons with icons. Currently I am using fixed width and heightfor these icons, how can I use percentage relative to the parent size of these icons? Example: 80%?
Fixed width and height of my icons:
.gc_footer_nix_icon_img, .gc_footer_use_icon_img {
width: 25px;
height: 25px;
}
HTML:
<div class='gc_container'>
<div class='gc_gift'>
<div class='gc_gift_inner'>
<div class='gc_amount'>$100 Amount</div>
<div class='gc_subtitle'>Test subtitle</div>
<div class='gc_hr'></div>
<div class='gc_terms'>Test terms</div>
<div class='gc_footer'>
<div class='gc_footer_expiry'>Test Date</div>
<div class='gc_footer_use_nix'>
<div class='gc_footer_use'>
<div class='gc_footer_button_wrapper'>
<div class='gc_footer_use_txt'>Use</div>
<div class='gc_footer_use_icon'>
<img class='gc_footer_use_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' />
</div>
</div>
</div>
<div class='gc_footer_nix'>
<div class='gc_footer_button_wrapper'>
<div class='gc_footer_nix_txt'>Nix</div>
<div class='gc_footer_nix_icon'>
<img class='gc_footer_nix_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.gc_gift {
margin-top:1.5%;
margin-left:auto;
margin-right:auto;
margin-bottom:1.5%;
height: auto;
width: 97%;
position:relative;
overflow: scroll;
webkit-overflow-scrolling: touch;
border:1px solid #D1D1D1;
}
.gc_gift_inner {
font-size:1em;
text-align: left;
background-color: #ffffff;
border:0px solid #D1D1D1;
display:table;
margin-top:2.5%;
margin-left:auto;
margin-right:auto;
margin-bottom:2.5%;
height: auto;
width: 95%;
position:relative;
overflow: scroll;
webkit-overflow-scrolling: touch;
}
.gc_amount {
color: red;
font-size:2em;
}
.gc_subtitle {
font-weight: bold;
font-size: 1em;
color: #707070;
}
.gc_hr {
width: 100%;
position: relative;
margin: auto;
border-color: #D1D1D1;
border-style: solid;
border-width: 1px 0 0 0;
}
.gc_terms {
font-size: 0.8em;
color: #707070;
}
.gc_footer {
width: 95%;
display: table;
position: relative;
}
.gc_footer_expiry {
display: table-cell;
vertical-align: bottom;
font-size: 0.8em;
font-weight: bold;
width: 40%;
color: #707070;
border: 0px solid yellow;
}
.gc_footer_use_nix {
display: table-cell;
vertical-align: middle;
width: 60%;
border:0px solid green;
margin: auto;
text-align: right;
}
.gc_footer_use {
display: inline-block;
vertical-align: middle;
background-color: #3F6EB6;
border-radius: 1px;
padding: 2%;
position: relative;
border:0px solid red;
margin-right: 5%;
}
.gc_footer_use_txt {
text-align: right;
display: table-cell;
vertical-align: middle;
color: white;
font-size: 1em;
font-weight: bold;
}
.gc_footer_use_icon {
text-align: right;
display: table-cell;
vertical-align: middle;
}
.gc_footer_nix {
display: inline-block;
vertical-align: middle;
background-color: #D61920;
border-radius: 1px;
color: white;
font-size: 1em;
border: 0x solid green;
padding: 2%;
margin-right: 5%;
}
.gc_footer_nix_txt {
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid blue;
width: 50%;
font-weight: bold;
}
.gc_footer_nix_icon {
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
border: 0px solid yellow;
width: 50%;
}
.gc_footer_button_wrapper {
display: table;
width: 100%;
position: relative;
border: 0px solid blue;
}
.gc_container {
background-color:#ffffff;
height: auto;
width: 90%;
display:table;
margin-top:3%;
margin-bottom:3%;
margin-left:auto;
margin-right:auto;
position:relative;
border:1px solid #D1D1D1;
}
.gc_amount, .gc_subtitle, .gc_terms, .gc_footer {
border: 0px solid green;
display:table;
width:100%;
padding-top:0.3em;
padding-bottom:0.3em;
}
.gc_footer_nix_icon_img, .gc_footer_use_icon_img {
width: 25px;
height: 25px;;
}
You need to set width to gc_footer_nix and gc_footer_use , and then you'll be able to set the width on the images . Fiddle: http://jsfiddle.net/TgW2D/7/