Is there some useful techniques?
Here is the fiddle
For text centering I tried to use this:
.wrapper div {
position: relative;
top: -8px;
}
To remove bottom canvas margin I tried to use this:
.wrapper canvas {
margin-bottom: -5px;
}
But I always try to avoid negative parameters.
Did you mean vertically align? Like this?
.wrapper {
border: 1px solid green;
display: inline-block;
}
.wrapper div {
border: 1px solid blue;
display: inline;
margin-left: 10px;
}
.wrapper canvas {
border: 1px solid red;
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<canvas width="32" height="32"></canvas>
<div class="question">1234567890</div>
</div>
is this what you mean?
canvas {
float: left;
}
You can use this code for horizontally design
<style>
.wrapper {
border: 1px solid green;
float:left;
}
.demo_class{
display: inline-block;
float: left;
}
.demo_class .question{
height: 32px;
line-height: 32px;
}
<div class="wrapper">
<div class="demo_class">
<canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas>
</div>
<div class="demo_class">
<div class="question">1234567890</div>
</div>
Related
I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/
I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.
.left {
background: green;
border: 1px solid blue;
float: left;
width: 90%;
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.
Pure css only please.
Simply use flex like this:
.container {
display: flex;
align-items: flex-start;
}
.left {
background: green;
border: 1px solid blue;
flex: 1; /* This will make your element fill the remaining space*/
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
}
<div class="container">
<div class="left">
<pre>
dkdkdkd
dkdkdkdkd
fjfjf
fjfjfj
</pre>
</div>
<div class="right">
<button>
dfdf
</button>
</div>
</div>
You can use this CSS:
html, body {
margin: 0;
}
* {
box-sizing: border-box;
}
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: 60px;
border: 1px solid red;
float: left;
}
The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.
https://jsfiddle.net/mLkjv565/1/
Use below css
.left {
background: green;
border: 1px solid blue;
float: left;
width: calc(100% - 60px);
}
.right {
background: yellow;
width: auto;
border: 1px solid red;
float: left;
}
Please check it here. fiddle
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>
I've seen an article about vertical centering of text and image. I've seen an article about vertical centering text inside a floated div.
But not both conditions.
Here's my experiment:
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
float: left;
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
Notice the image is vertically centered, but the green circle is not vertically centered.
How can I get both the image and the green circle vertically centered?
You can achieve a totally centered element using calc and view-units:
#example {
width: 100px;
height: 100px;
border: 1px solid green;
border-radius: 50px;
position: fixed;
top: calc(50vh - 50px);
left: calc(50vw - 50px);
}
<div id="example"></div>
This example will keep it right in the centre even with scrolling, etc - but you could place it centre based on the initial view using an absolute position.
My fixed code. It works in IE and in Chrome.
top: calc(0.5vh + 50px); is what does the trick. 50px of course would be the height of the element you want to vertically center.
.phase {
width: 500px;
height: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.circle {
position: relative;
float: left;
top: calc(0.5vh + 50px);
height: 50px;
width: 50px;
vertical-align: middle;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
float: left;
border: 1px solid black;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="circle">
</div>
<div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;" />
</div>
</div>
</div>
<h1>I love css</h1>
</div>
You need to place the circle in a container and set the container's line-height property. Try this:
.phase {
width: 500px;
border: 1px solid red;
}
.float-right {
float: right;
}
.carousel {
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid orange;
}
.container {
float: left;
height: 300px;
line-height: 300px;
}
.circle {
display: inline-block;
height: 50px;
width: 50px;
border: 1px solid green;
border-radius: 50%;
background-color: white;
}
.thumbnail {
display: inline-block;
}
<div class="phase">
<div class="float-right">
<div class="carousel">
<div class="container"><div class="circle">
</div></div>
<div class="container"><div class="thumbnail">
<img src="https://www.google.com/images/nav_logo231.png" style="width:160px;height:160px;vertical-align:middle" />
</div></div>
</div>
</div>
</div>
I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
I have a grid of fixed size divs, and this must remain CSS-only.
Inside each div, I have a random size image inside.
I need the image to scale to the div size while keeping the aspect ratio, and also be centered both horizontally and vertically within the div.
#holder {
width: 800px;
margin: 0 auto;
}
.tile {
display: inline-block;
padding: 10px 15px;
border: 1px solid black;
text-align: center;
/*vertical-align: middle;*/
width: 300px;
height: 300px;
}
.tile img {
/*vertical-align: middle;*/
outline: 1px dashed red;
max-height:100%;
max-width:100%;
}
Can't center vertically. Everything else seems to work fine.
UPDATE: Also this doesn't work when the img is smaller than the div.
width: 100%; and height: auto; (or height: auto !important; in case there is a height attribute on the img element) usually does the trick.
Sorry misread the question, this fixes the aspect ratio but not the centering. This tread might give some valuable ideas.
The problem here is that the block height is unknown.
Here's a solution that work on firefox/chrome:
#holder {
width: 800px;
margin: 0 auto;
}
.tile {
padding: 10px 15px;
border: 1px solid black;
width: 300px;
height: 300px;
display: table;
}
.tile-layout {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.tile img {
outline: 1px dashed red;
width:100%;
}
Using this html template:
<div id="holder">
<div class="tile">
<div class="tile-layout">
<img src="{{ img }}"/>
</div>
</div>
</div>
#holder {
display:table;
width: 800px;
margin: 0 auto;
height:100%;
possition:relative;
}
.tile {
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
.tileInner{
display:block;
width: 300px;
height: 300px;
padding: 10px 15px;
}
.tile img {
display:table-cell;
vertical-align: middle;
outline: 1px dashed red;
max-height:100%;
max-width:100%;
}
html
<div id="holder">
<div class="tile">
<div class="tileInner">
<img src="imageUrl"/>
</div>
</div>
</div>