I have an image inside a div like this
<div><img /><div>
The image is dynamic of no fixed size. The div is of size 200px by 200px. The image size is not known beforehand. If the size of the image is greater than 190px by 190px, set it to 190px by 190px (that is, max-width:190px, max-height:190px). How can I center the image with these needs satisfied? I need a solution working in Internet Explorer 7 too.
The solution here and here can not be applied to my problem because
It is not certain that the image would be less than 200 pixels.
I want horizontal alignment too.
No Internet Explorer 7 support.
(Some questions have been asked on Stack Overflow regarding the same, but my scenario is different, so they are not applicable for this particular problem.)
The solution is to change the div into a table. Normally, you shouldn't use tables for positioning, but when it comes to older non-standards-compliant browsers, sometimes that's the only choice. Demonstration here. For the record, this works on Internet Explorer 6, as well.
Code:
CSS
#theDiv
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
HTML
<table id="theDiv" style="border: solid 1px #000">
<tr>
<td>
<img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
</td>
</tr>
</table>
Here's an update that uses CSS instead of changing the markup to an actual table:
#theDiv
{
display: table;
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
}
#theImg
{
max-width: 190px;
max-height: 190px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div id="theDiv" style="border: solid 1px #000">
<div class="tr">
<div class="td">
<img id="theImg" src="http://lorempixel.com/100/100/" />
</div>
</div>
</div>
See this fiddle: http://jsfiddle.net/ANwmv/
Solution to centering as suggested in: http://www.brunildo.org/test/img_center.html
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
HTML:
<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
Give the parent a line-height equivalent to its own height, and a text-align property of center. Give the image a vertical-align property of middle to centre it within its line-height:
HTML:
<html>
<body>
<div>
<img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>
</div>
</body>
</html>
CSS:
div, img {
border: 1px solid black;
}
div {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
img {
max-width: 190px;
max-height: 190px;
vertical-align: middle;
}
JS Fiddle example
You can do this:
<div style="text-align:center;vertical-align:middle;">
<img style="margin:0 auto" />
</div>
Related
I'm trying to format a HTML DIV in a way that the margin-top is set responsively based on the div's height: jsfiddle
There's another div inside the wrapper, that has a display: none set to it, but it may change when the user inputs a wrong password. Thing is, there is a div below that it's being pushed down when display: content is set to the second div. I want the content of the page to responsively go upwards instead of downwards.
How's now:
How it should be:
Given your example, your goal and your preference to avoid flexbox due to IE10, I think your best option is to use display:table for this container.
With this, you have the ability to use vertical-align properties in the "table-cell".
Check the example below. I added a toggle button to show/hide your captcha for demo purposes. May want to view it full screen to get the effect.
$("#toggle").on('click', function() {
$(".captcha").toggle();
});
html,body {
height: 100%;
}
.outer-wrapper {
height: 100%;
width: 100%;
background: #eeeeee;
display: table;
}
.inner-wrapper {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
height: inherit;
}
.login-wrapper {
background-color: #172238;
color: white;
width: 200px;
text-align: center;
height: auto;
display: block;
margin: 0 auto;
}
.captcha{
margin-top: 250px;
display: content; // This one changes
}
.homologation-line {
min-width: 200px;
background-color: #ffd800;
color: black;
text-align: center;
height: 30px;
}
#toggle {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="login-wrapper">
<p>Login</p>
<div class="captcha">
ENTER THE DIGITS:
</div>
</div>
<div class="homologation-line">
HOMOLOGATION
</div>
</div>
</div>
I have a problem on making CSS to fill remaining width space. I've tried so many other answers in stackoverflow and the same problem occur, the div keeps on breaking into a new line. Here's my code:
http://jsfiddle.net/YSLJX/
I've tried these but nothing works...
width: 100%
width: available
width: auto
You can simplify your html, float the image element left (u_img) then apply overflow hidden to the second element (u_msg), this will 'tell' it to apply block level behaviour and stretch to the remaining space.
Demo Fiddle
HTML
<div id="chat" style="height: 350px;">
<div class="u_img">
<img src="https://lh3.googleusercontent.com/-g_zvhql17tw/AAAAAAAAAAI/AAAAAAAAARE/xQMDsE3q_K0/w48-c-h48/photo.jpg"" />
</div>
<div class="u_msg"><span class="post_time">Tue May 6 13:52:34 2014</span><span class="u_name"><b>Qixster</b>:</span><span id="msg_container" style="color: #000;font-size: 16px;">test</span>
</div>
</div>
CSS
#chat {
width: 100%;
height: 100%;
overflow:hidden;
border: 1px solid #c0c0c0
}
.msg {
border: 1px solid #c0c0c0;
min-height: -moz-fit-content;
min-height: -webkit-fit-content;
min-height: fit-content;
}
.u_img {
float: left;
max-height: 48px;
}
.u_msg {
padding-left: 5px;
font-family:'Ubuntu', sans-serif;
word-wrap: break-word;
overflow:hidden;
}
.u_name {
float: left;
}
.post_time {
float:right;
right:0px;
color:#c0c0c0;
font-size:10px;
}
The alternative would be to apply a display:table structure
http://jsfiddle.net/fretwiz/LuShM/
I have a divs stack on top of each other, and inside those divs there's two inline-block divs. One div with 80% width i floated to the left and the other one width 20% just take the right side.
I wanted to make the right div center vertically, the parent row divs may dynamically resize according to the content of the floated div.
Is there a solution other than using tables?
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
<div id="container">
<div id="content-wrapper">
<div id="publication_date">21 October 2014</div>
<div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
</div>
<div id="bookmark">
<img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
</div>
</div>
You can do it without using tables, Try this with CSS :
#container {
border-bottom: 1px solid #ebebeb;
padding-bottom: 30px;
overflow: hidden;
height: 100%;
position: relative;
}
#content-wrapper {
width: 80%;
float: left;
}
#bookmark {
position: absolute;
width: 20%;
text-align: center;
right: 0;
top: 50%;
-ms-transform:translateY(-50%); /* IE 9 */
-webkit-transform:translateY(-50%); /* Chrome, Safari, Opera */
transform:translateY(-50%); /* Standard syntax */
}
Demo
Hope this will help you ...
Is this what you want check the demo
This is the most simple and straight forward way to do this just add display:table and table-cell to container and content wrapper,bookmark
Css
#container {
border-bottom: 1px solid #ebebeb;
padding-bottom: 30px;
overflow: hidden;
height: 100%;
display:table;
}
#content-wrapper {
display: table-cell;
width: 100%;
float: left;
}
#bookmark {
width: 20%;
display: table-cell;
vertical-align:middle;
text-align:center;
}
Output
Can you sacrifice the display: inline-block; on the bookmark? If so, try adjusting the css;
http://jsfiddle.net/LuShM/3/
#container {
display: table;
/*previous styles*/
}
#bookmark {
/*previous styles*/
display: table-cell;
vertical-align: middle;
}
JSFiddle link
HTML:
<div id="va-m">
<img src="http://placehold.it/150x150">
<h1> vertical-align: middle </h1>
</div>
<div id="no-va">
<img src="http://placehold.it/150x150">
<h1> no vertical align </h1>
</div>
CSS:
div {
margin-top: 30px;
padding: 5px;
width: 500px;
height: 150px;
line-height: 200px;
background-color: blue;
}
#va-m img {
vertical-align: middle;
}
h1 {
display: inline;
}
img {
border-radius: 75px;
}
I'm trying to align the image and text vertically in the container div. However, I seem to either get the choice of aligning the image, or aligning the text. Using vertical-align: middle on the img tag pushes it out of the container. Why?
Change the height to auto
Fiddle
div {
margin-top: 30px;
padding: 5px;
width: 500px;
//height: 150px;
height: auto;
line-height: 200px;
background-color: blue;
}
Update: Use table and table-cell + vertical-align: middle
Fiddle
I want to create a border layout for a web-app, where there is a fixed size header, footer, a sidebar, and the main center content that expands to fill the remaining space.
Think of it like your browser, where the toolbars and status-bar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.
To clarify, I want to specify the height of the entire design in pixels, for example 600px. Then I want the sidebar and the center <div> tags to expand down to fill the space available, even if their contents aren't large enough to fill the space.
The web-browser analogy can be used here too. Even if the page you are looking at in the browser isn't taller than the browser window, the browser doesn't resize.
Is there any way to do this with CSS?
div { border : 1px solid #d3d3e3 }
#north { margin:0; padding:1em; }
#south { margin:0; padding:1em; }
#east { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }
#west { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }
#center { margin:0; padding:1em; padding-bottom:0em; }
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden }
<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>
Live link: http://jsfiddle.net/marrok/dGw6K/2/
The CSS table layout can handle this nicely.
.borderLayout {
display: table;
width: 100%
}
.borderLayout .top {
display: table-row;
}
.borderLayout .left {
display: table-cell;
vertical-align: middle;
width: 10%;
}
.borderLayout .center {
display: table-cell;
vertical-align: middle;
}
.borderLayout .right {
display: table-cell;
vertical-align: middle;
width: 10%;
}
.borderLayout .bottom {
display: table-row;
}
JSFiddle
I couldn't manage to find an answer to this question that worked for me, so I tried various attempts. This is a simple solution I managed to put together using flexbox.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/*div { border : 1px solid #d3d3e3 }*/
html { height: 100%; }
body { height: 100%; }
.borderLayout {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.borderLayout .top {
width: 100%;
}
.borderLayout .middle {
flex-grow: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
}
.borderLayout .middle .side {
}
.borderLayout .middle .center {
vertical-align: middle;
flex-grow: 1;
}
.borderLayout .bottom {
width: 100%;
}
</style>
</head>
<body>
<div class="borderLayout" style="width: 100%; height: 100%; background-color: cyan;" >
<div class="top" id="north" style="height: 150px; background-color: red;">North</div >
<div class="middle" style="background-color: magenta;" >
<div class="side borderLayout" id="west" style="width: 10%; background-color: yellow;">
<div class="top" style="height: 100px; background-color: #FF8000;">West 1</div>
<div class="middle">West 2</div>
<div class="bottom" style="height: 75px; background-color: #FF8080;">West 3</div>
</div>
<div class="center" id="center" style="background-color: white;">Center</div>
<div class="side" id="east" style="width: 20%; background-color: green;">East</div>
</div>
<div class="bottom" id="south" style="height: 50px; background-color: blue;">South</div>
</div>
</body>
</html>
The method you refer to sounds like a job for footer stick - this is old already, but works a charm still ... the man in blue - footerStickAlt
Similar question here.
And I'm sure if you use the same criteria in that question and the question linked in that to run a search, you'll come up with more.
try flexbox, works with firefox and webkit
http://www.html5rocks.com/en/tutorials/flexbox/quick/
the current implementation is not updated, but it is good enough
but you can probably do this with tables (that are similar to the flexbox)
hope this helps