I have a document that contains HTML and CSS.
It is being rendered in a way that I don't understand.
I have observed this with 3 different browsers
(Firefox, Chromium, and Opera),
so it is unlikely to be a browser bug.
The following image shows what I expect to see.
(Before taking this screenshot, I used my
browser's zoom function to zoom in.)
The following image shows what I actually see.
(Again, I zoomed in before capturing this image.)
The upper group of buttons is as I expect.
However,
in the lower group of buttons,
the "y" button is wider than I expect.
I'll show the markup of the document in a moment,
but first I want to talk about it.
The difference between the two "y" buttons
is that the upper one has the
class button-wider-1,
whereas the lower one has the class button-wider-2.
In the CSS, each of these classes sets a width,
using a calc expression.
The difference between the two expressions
is that the expression for button-wider-2
adds the width of an "x" button,
which means that I expect
the right-hand border of the "y" button to
align with the
right-hand border of the right-hand "x" button.
However,
as you can see from the second image above, that doesn't happen.
My question is: why?
Here is the document (which is completely self-contained):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Question</title>
<style type="text/css">
.mystery,
.mystery *
{
padding: 0;
border: 0;
margin: 0;
}
.button-container
{
background-color: #f77;
padding: 1rem;
margin: 1rem;
}
.button
{
float: left;
font-family: 'Courier', monospace;
width: 3.1rem;
height: 2rem;
border: solid black 2px;
margin-right: 0.7rem;
}
.button-wider-1
{
/*
The following 'calc' expression adds up:
* the standard width of a button (i.e. the width
of an element with class "button");
* the width of a button's border;
* the horizontal margin (i.e. the value of margin-right for a
button);
* the width of a button's border;
*/
width: calc(
3.1rem +
2px +
0.7rem +
2px
);
}
.button-wider-2
{
/*
The following 'calc' expression is the same as the previous,
except that there is an extra term at the end, the standard width
of a button.
*/
width: calc(
3.1rem +
2px +
0.7rem +
2px +
3.1rem
);
}
</style>
</head>
<body>
<div class="mystery">
<div class="button-container">
<button type="button" class="button">x</button>
<button type="button" class="button">x</button>
<div style="clear: both"></div>
<button type="button" class="button button-wider-1">y</button>
<div style="clear: both"></div>
</div>
<div class="button-container">
<button type="button" class="button">x</button>
<button type="button" class="button">x</button>
<div style="clear: both"></div>
<button type="button" class="button button-wider-2">y</button>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>
I have observed this unexpected rendering in the following 3 browsers
(all on Linux):
Firefox ESR 52.5.2
Chromium 57.0.2987.98
Opera 50.0.2762.58 (the latest version of
Opera at time of writing)
You are calculating the width of your buttons by adding their width and their border-width. However, now browsers default to border-box for property box-sizing on buttons.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
A quick fix is to add box-sizing: content-box; to .button so that reality matches what you expect about calculating widths.
Another fix would be to remove the two +2px from the second calc(); borders being part of the width of a button, you only want your second button to be "2 buttons + 1 margin". The first button is unchanged because you actually want it to be "1 button + 1 margin + 2 borders" so it'll work with both border-box and content-box.
Related
I thought I knew my way around CSS, but I needed to explain something to someone just now and I found I couldn't.
My question basically boils down to: why is vertical-align:baseline ignored when there are other alignments in the same line?
Example: if the second span has vertical-align:bottom, the first span's vertical alignment is ignored if it is baseline; it behaves as if it has bottom too.
span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}
<p>
<span>one</span> <span>two</span>
</p>
While if all the spans have a vertical-align other than baseline, or, if they are all baseline, then they behave as expected.
span:first-child {vertical-align:top}
span:last-child {font-size:3em; vertical-align:bottom;}
<p>
<span>one</span> <span>two</span>
</p>
span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:baseline;}
<p>
<span>one</span> <span>two</span>
</p>
If this is normal behaviour, then why isn't it described anywhere? I haven't found any source that says baseline and top/bottom interfere with each other in such a way.
Vertical-Align
vertical-align is used to align inline-level elements. These are elements, whose display property evaluates to:
inline
inline-block
inline-table (not considered in this answer)
Inline-level elements are laid out next to each other in lines. Once there are more elements than fit into the current line, a new line is created beneath it. All these lines have a so-called line box, which encloses all the content of its line. Differently sized content means line boxes of different height.
In the following illustration the top and bottom of line boxes are indicated by red lines.
Inside these line boxes the property vertical-align is responsible for aligning the individual elements.
Baseline
The most important reference point to align vertically is the baseline of the involved elements. In some cases the top and bottom edge of the element’s enclosing box becomes important, too.
Inline elements
The top and bottom edge of the line height is indicated by red lines, the height of the font by green lines and the baseline by a blue line.
On the left, the text has a line height set to the same height as the font-size. The green and red line collapsed to one line on each side.
In the middle, the line height is twice as large as the font-size.
On the right, the line height is half as large as the font-size.
Note that the inline element’s outer edges (the red lines) does not matter, if the line height is smaller than the height of the font.
Inline-Block Element
From left to right you see:
an inline-block element with in-flow content
an inline-block element with in-flow content and overflow: hidden
an inline-block element with no in-flow content (but the content area has a height)
The boundaries of the margin is indicated by red lines, the border is yellow, the padding green and the content area blue. The baseline of each inline-block element is shown as a blue line.
The inline-block element’s baseline depends on whether the element has in-flow content. In case of:
in-flow content the baseline of the inline-block element is the baseline of the last content element in normal flow (example on the left)
in-flow content but an overflow property evaluating to something other than visible, the baseline is the bottom edge of the margin-box (example in the middle)
no in-flow content the baseline is, again, the bottom edge of the margin-box (example on the right)
Line box
This is probably the most confusing part, when working with vertical-align. It means, the baseline is placed where ever it needs to be to fulfil all other conditions like vertical-align and minimizing the line box’s height. It is a free parameter in the equation.
Since the line box’s baseline is invisible, it may not immediately be obvious where it is. But, you can make it visible very easily. Just add a character at the beginning of the line in questions, like the "x" in the figure. If this character is not aligned in any way, it will sit on the baseline by default.
Around its baseline the line box has what we might call its text box (green lines in the figure). The text box can simply be thought of as an inline element inside the line box without any alignment. Its height is equal to the font-size of its parent element. Therefore, the text box only just encloses the unformatted text of the line box. Since this text box is tied to the baseline, it moves when the baseline moves.
Snippet
If you want to do some experiment with various vertical-align and font-size here you have a snippet where you can try it out. Is also available in JSFiddle.
let sl1 = document.getElementById('sl1');
let sl2 = document.getElementById('sl2');
let sl3 = document.getElementById('sl3');
let sl4 = document.getElementById('sl4');
let elm1 = document.getElementById('elm1');
let elm2 = document.getElementById('elm2');
let elm3 = document.getElementById('elm3');
let elm4 = document.getElementById('elm4');
let ip1 = document.getElementById('ip1');
let ip2 = document.getElementById('ip2');
let ip3 = document.getElementById('ip3');
let ip4 = document.getElementById('ip4');
let slArr = [sl1, sl2, sl3, sl4];
let elmArr = [elm1, elm2, elm3, elm4];
let ipArr = [ip1, ip2, ip3, ip4];
let valueArr = ['baseline', 'top', 'middle', 'bottom'];
for (let i = 0; i < slArr.length; i++) {
slArr[i].addEventListener('change', (event) => {
elmArr[i].style.verticalAlign = event.target.value;
elmArr[i].innerHTML = event.target.value;
addDiv();
})
}
for (let i = 0; i < ipArr.length; i++) {
ipArr[i].addEventListener('change', (event) => {
elmArr[i].style.fontSize = event.target.value + 'em';
addDiv();
})
}
document.getElementById('btnRandom').addEventListener('click', () => {
for (let i = 0; i < elmArr.length; i++) {
let element = elmArr[i];
let fontSize = Math.floor(Math.random() * 4 + 1);
ipArr[i].value = fontSize;
element.style.fontSize = fontSize + 'em';
let styleIndex = Math.floor(Math.random() * 4);
element.style.verticalAlign = valueArr[styleIndex];
element.innerHTML = valueArr[styleIndex];
slArr[i].selectedIndex = styleIndex;
}
}, this);
function addDiv() {
let view = document.getElementById('viewer');
view.innerHTML = "";
elmArr.forEach(function(element) {
let div = document.createElement('div');
div.appendChild(element.cloneNode());
view.appendChild(div);
}, this);
}
.header span {
color: #000;
}
select {
width: 100px;
}
#elms {
border: solid 1px #000;
margin-top: 20px;
position: relative;
}
span {
color: #FFF;
font-size: 1em;
}
#elm1 {
background-color: #300;
}
#elm2 {
background-color: #6B0;
}
#elm3 {
background-color: #90A;
}
#elm4 {
background-color: #B00;
}
div {
z-index: -1;
}
#div1 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 25%;
}
#div2 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 50%;
}
#div3 {
width: 100%;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
top: 75%;
}
<div class="header"> <span style="width: 100px;display: block;float: left;margin-right: 20px;">vertical align</span> <span>font-size(em)</span> </div>
<div>
<select name="sl1" id="sl1">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip1" />
<br>
<select name="sl2" id="sl2">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip2" />
<br>
<select name="sl3" id="sl3">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip3" />
<br>
<select name="sl4" id="sl4">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<input type="number" value="1" id="ip4" />
<br>
<button id="btnRandom" (onclick)="random()">Random</button>
</div>
<div id="elms">
<span id="elm1">one</span>
<span id="elm2">two</span>
<span id="elm3">three</span>
<span id="elm4">four</span>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="viewer"></div>
This snippet is made by Duannx.
Source: Please note that this is an extract of Vertical-Align: All You Need To Know written by Christopher Aue.
The question is why are vertical-align: baseline; ignored. Well I don't think it is. In your first snippet you're using baseline and bottom what clearly gives a difference between the two <span> elements. So what does baseline do? Well baseline Aligns the baseline of the element with the baseline of the parent element. In the example below I've copied and adjusted some parts to give the difference.
span.one {vertical-align:baseline}
span.two {vertical-align:middle;}
<p>
<span class="one">one</span> <span class="two">two</span>
</p>
As you can see the baseline alignment acts normal just as the middle alignment.
Now lets test something else. lets swap the alignment of baseline and middle and edit middle and add a third <span>
span.one { vertical-align: top;}
span.two { vertical-align: baseline;}
span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}
<p>
<span class="one">one</span> <span class="two">two</span> <span class="two">two</span><br><br> <span class="three">three</span>
</p>
Now if you'll edit the second snippet and take a look at the vertical-align of <span class="three"> you can clearly see that when changing the alignment the text does change it's position.
But you're question relates on text on the same line so lets take a look at the snippet down below.
span.one { vertical-align: middle;}
span.two { vertical-align: baseline;}
span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}
<p>
<span class="one">one</span> <span class="two">two</span> <span class="two">two</span><span class="three">three</span>
</p>
As you can see in this third snippet I've placed the third <span> next to one and two. And it does make a difference. The baseline in this case is different from the middle alignment. This is because the baseline grabs the baseline of the parent. since the parent's height is normal it doesn't affect baseline and top alignment. but when you'll use middle or sub it is clearly a difference.
For information about each alignment, check out this link.
A shorter explanation: A starting point is knowing where the baseline of the parent is. Add some text within the <p> tag or a <span> with vertical-alignment set to baseline (span "one" below). The baseline of span "one" is the bottom of the characters, e.g. the bottom of the letter 'n'.
Then its easy to see how the other spans change in relation to it. I added a border around span "one" so we can see its top and bottom edges clearly.
span { }
span:nth-child(1) {vertical-align:baseline; font-size:3em; border: 1px solid gray}
span:nth-child(2) {vertical-align:top; color:red}
span:nth-child(3) {vertical-align:middle; color:green;}
span:nth-child(4) {vertical-align:bottom; color:blue;}
<p>
<span>one</span> <span>two</span> <span>three</span> <span>four</span>
</p>
Adding a background image to a DIV. Image must have low opacity, but the other elements in the DIV must have normal opacity.
jsFiddle of my code
I was following this SO answer (answer's Codepen is here).
However, I must be doing something wrong (knowing me, something painfully obvious). Can anyone spot my mistake, or suggest the solution?
In case my above jsFiddle someday disappers, here is my code:
HTML:
<div id="loginFormDIV">
<div id="headerDIV">
<p>Login Please</p>
</div>
<div id="formDIV">
<div id="fd_loginDIV">
<p>Login ID:</p>
<input id="fd_login" type="text" />
</div>
<div id="fd_pwordDIV">
<p>Password:</p>
<input id="fd_pword" type="password" />
</div>
<div id="fd_submitDIV">
<input id="fd_submit" type="button" value="Submit" />
</div>
</div>
</div><!-- #loginForm -->
CSS:
* { margin: 0; padding: 0; outline: 0 }
html {min-height:100%;margin-bottom:1px;font-size: 62.5%;background:#eaeaea;}
h1, h2, h3 {color:#f1f0ee;font-family:Segoe UI Light, Arial, Verdana, Geneva, sans-serif;font-family:"Segoe UI light","Segoe UI";}
h1 {font-size:2.5em;font-weight:normal;border-bottom:0px solid #c6beaa;padding-bottom:25px;}
#loginFormDIV {height:250px;width:400px;position:absolute;left:30%;font-size:1.6em;z-index:10;}
#headerDIV {height:40px;width:100%;background:white;}
#formDIV {height:210px;width:100%;position:relative;}
#formDIV:after{content:'';display:block;position:absolute;top:0;left:0;background:url(http://placekitten.com/400/250);background-size:cover;opacity:0.2;z-index:-2;}
#fd_loginDIV {height:35%;width:80%;margin:0 auto;border:1px solid blue;}
#fd_pwordDIV {height:35%;width:80%;margin:0 auto;border:1px solid red;}
#fd_submitDIV {height:25%;width:35%;float:right;border:1px solid orange;}
#fd_loginDIV p{}
#fd_pwordDIV p{}
#fd_login {height:40px;width:60%;}
#fd_pword {height:40px;width:60%;}
#fd_submit {}
How to use Chrome dev tools to find out the problem:
In the elements pane, find and select the :after pseudo-element
In the view pane, a tooltip appears. It indicates the element id, and the size: 0px x 0px.
That's why it is not visible.
Add:
width: 100%;
height: 100%;
to #formDIV:after.
As a side note, having readable code is very important, especially for debugging. Use new lines, spaces, indentation and comments generously!
I am using a Dojo tabContainer.
The quick question: do you have to specify the widget size in pixel in the CSS, if you are dealing with a Dojo container?
From what I am seeing, the only way to get a TabContainer to actually show is by giving it an absolute size via CSS.
UPDATE: I figured out that the elements body and html were missing the height attribute, and therefore it was computed to 0. So, now if I set them as 100% I will display the form... but, it will be huge! (as long as the page). The idea is to set its height to auto, so that it's "as long as it needs to be"... is that even possible?
In my HTML I have something like:
...
<body>
<div id="loginForm"> </div>
</body>
...
I then have then in the code:
require(["app/widgets/LoginForm"], function( loginForm){
// Create the "application" object, and places them in the right spot.
loginForm = new LoginForm( {} , 'loginForm');
loginForm.startup();
});
LoginForm is a simple template-based widget with the following template:
<div data-dojo-attach-point="tabContainer" data-dojo-type="app.TabFading" data-dojo-props="tabPosition:'top'" style="height:100%">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-attach-point="loginPane" data-dojo-props="title: 'Login'">
<form data-dojo-type="dijit.form.Form" data-dojo-attach-point="loginForm" method="POST">
<label for="${id}_login">Login</label>
<input name="login" id="${id}_login" data-dojo-attach-point="login" data-dojo-type="dijit.form.ValidationTextBox" data-dojo-props="required:true"/>
<label for="${id}_password">Password</label>
<input name="password" id="${id}_password0" data-dojo-attach-point="password" data-dojo-type="app.ValidationPassword" />
<input type="submit" data-dojo-attach-point="button" data-dojo-type="app.BusyButton" label="Login!" />
</form>
</div>
</div>
</div>
The CSS is as basic as it gets:
#loginForm {
width: 300px;
margin: 0 auto;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
/*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
background: -moz-linear-gradient(19% 75% 90deg,#FCFCFC, #CCCCCC);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FCFCFC), to(#CCCCCC));
/*** Shadow behind the box ***/
-moz-box-shadow:0px -5px 300px #a9a0a0;
-webkit-box-shadow:0px -5px 300px #a9a0a0;
}
body {
background-color: #fcfcfc;
font: 9pt/1.5em Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0 0;
}
The only way I have to make the TabContainer actually appear is to have height:300px in it -- otherwise, the computed height is 0.
Is this how it's meant to be? Or am I doing something wrong?
If you set the property doLayout to false on either the ContentPane or the TabContainer it should automatically size the height to the content. The doLayout property of the dijit layout containers defaults to true, which then requires a specific height to be applied to it.
Just set the tab container to doLayout="false"
Detail example is here : https://dojotoolkit.org/reference-guide/1.7/dijit/layout/TabContainer.html#examples
I have a div with position:fixed that is my container div for some menus. I've set it to top:0px, bottom:0px to always fill the viewport. Inside that div I want to have 2 other divs, the lower one of which contains lots of lines and has overflow:auto. I would expect that it would be contained within the container div, but if there are too many lines it simply expands outside the fixed div. Below is my code and a screenshot to clarify:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
Is there any way for me to do this? Again, I want #innerstatic2 to be properly contained within #outerfixed and get scrollbars if it gets bigger than the space it has inside #outerfixed.
I know there are some possibilites to hack around this by also fixing #innerstatic2, but I would really like it to be within the flow inside #outerfixed if possible, so that if I move #outerfixed somewhere, the inner element would come with it.
EDIT: I know I can set overflow:auto on the #outerfixed and get a scrollbar on the whole thing, but I specifically want a scrollbar just on #innerstatic2, it is a grid and I want to scroll just the grid.
Anyone? Possible?
There's a two-step solution for this, but it comes at something of a cost:
Add overflow-y: scroll; to the css for #innerstatic2.
define a height (or max-height) for #innerstatic2, otherwise it won't overflow, it'll just keep increasing its height (the default for a div is height: auto).
Edited because I just can't stop myself, sometimes.
I've posted a demo on jsbin to show a jQuery implementation of this, which will calculate a height for you (it's not generalised, so it'll only work with your current html).
(function($) {
$.fn.innerstaticHeight = function() {
var heightOfOuterfixed = $('#outerfixed').height(),
offset = $('#innerstatic2').offset(),
topOfInnerstatic2 = offset.top,
potentialHeight = heightOfOuterfixed - topOfInnerstatic2;
$('#innerstatic2').css('height',potentialHeight);
}
})(jQuery);
$(document).ready(
function() {
$('#innerstatic2').innerstaticHeight();
}
);
I solved it by giving absolute position to the ul and height 100%
ul {
overflow-y: scroll;
position: absolute;
height: 100%;
}
check out this FIDDLE
overflow-y:scroll;
And add this for iOS devices. It does give a better scroll using touch. The overflow-y needs to be scroll! for secure reasons. auto wont work for some people. or at least thats what i heard.
-webkit-overflow-scrolling: touch;
you should set height for outerfixed and max-height for innerstatic2
see this might be helpful DEMO
It is the container div who has to be with the overflow:auto attribute. In this case, the #outerfixed div
The only way I figure, is to set innerstatic2 to absolute position (so you can use top and bottom to size it in relation to outerfixed), then inside innerstatic2 create another div where you put your text in. Then you give innerstatic2 the "overflow: auto;" indication. The drawback of this method, that innerstatic2 does not move down, when innerstatic1 grows, since it has to be position absolutely. If it needs to move, it must be "position: relative", but then you need to set a fixed height for it. So either way you have to settle for a compromise.
Once all browsers support the newer CSS3 features, like the calculation support, there will be better options to do this, without these drawbacks.
Not ideal, but this should get you 90% of they way
<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
<div style ="width:15em; background-color: green;">
Title
</div>
<div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
<div style="height:100em; background-color:red; width:10em;">
scroll<br/>
scroll<br/>
scroll<br/>
</div>
</div>
</div>
So I couldn't do with the fixed position but I got the desired effect with the position as relative.
Try this
<div class="parent" style = "overflow: scroll; position: relative; width: content-box"">
<div class="scrollable-child" >
//Your content here
</div>
</div>
I used this in one of my vuejs projects
<template>
<v-flex class=" d-flex flex-column " style="overflow: scroll; position: relative; width: content-box">
//FIXED HEAD
<v-flex class="pt-10" style="position: fixed; background-color: black;width: 25.2em;z-index: 1;border-radius: 20px 20px 0 0">
<TextView class="mx-4" text="Thur 28, 2021" size="24" bold :color="colors.primaryText"/>
<TextView :text="`${order.totalOrder()} Items`" size="24" bold :color="colors.primaryText" class="my-2 mx-4"/>
<v-divider dark style="height: 5px" class="max-4" />
</v-flex>
//SCROLABLE LIST ITEMS
<v-flex class=" mx-4 d-flex flex-column justify-end " style="margin-top: 100px;padding-bottom: 100px; padding-top: 50px">
<!-- <TextView :text="receipt" :color="colors.primaryText"/>-->
<ProductComponent type="cartItem" v-for="(product,index) in order.products" :key="`order_item_${index}`" :product="product" :invert-theme="true" #onAdd="addOneMore(index)" #onRemove="removeOne(index)" />
</v-flex>
//BOTTOM FIXED BTN
<v-flex class="d-flex flex-column justify-end mb-2 xs12 mx-4 " style="max-height: 100px; position: fixed; bottom: 30px; width: 23em" >
<v-btn block ref="renderBtn" #click="renderReceipt()" depressed min-height="60" style="border-radius: 20px">
<TextView text="Order" bold/>
</v-btn>
</v-flex>
</v-flex>
</template>
I (absolute beginner) would like to put an image into a box with a little margin around. I tried with padding and so, didn't work. Then I tried this:
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
But instead the image gets stuck in the upper left corner.
Couple of ways to do this:
My usual is to set a background image instead.
In your css:
div#img_container {
background: url(images/myImage.png) center center
}
In your html:
<div id="img_container"></div>
Or to just put some padding around it in your CSS
img#myImage {
padding: 20px;
}
and the HTML
<img id="myImage" src="images/myImage.png" />
Try this:
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
As rpflo suggests, using the background-position property is especially great if the container happens to be smaller than the image. Just remember to include the "background-repeat:none" style if you don't want the image to be tiled.
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally):
http://plugins.jquery.com/project/CenterImage
Demo site:
http://www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
Currently available configuration settings:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
$('.4th').CenterImage('remove');