Please help me center a div that does not have a predefined width, inside another div. Please see the code below (or on jsbin at http://jsbin.com/ufivif). Thanks.
EDIT: the problem is that I need the caption below the image to be aligned to the left edge of the image. So text-align: center on the container does not work for me.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container
{
border: 1px solid red;
padding: 5em;
position: relative;
}
.container img
{
border: 1px solid #333333;
padding: 1em;
}
.container .image
{
border: 1px solid green;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png"/>
<div class="caption">test image</div>
</div>
</div>
</body>
</html>
A combination of display: inline-block; and text-align:center
http://jsbin.com/ufivif/5
body {
padding: 0;
margin: 0;
}
.container
{
border: 1px solid gold;
padding: 10px;
text-align: center;
}
.container .image
{
border: 1px solid silver;
padding: 10px;
display: inline-block;
text-align: left;
}
.container .image img
{
border: 1px solid #9C6963 ;
padding: 10px;
}
So you need the image centered and not the text here's a way to fix it.
<style>
.container
{
border: 1px solid red;
padding: 5em;
text-align: center;
}
.imageWrapper
{
display: inline;
}
.container .image
{
border: 1px solid green;
display: inline;
position: relative;
}
.caption
{
position: absolute;
left: 0px;
top: 0px;
padding: 1em;
}
</style>
<div class="container">
<div class='imageWrapper'>
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
<div class="caption">Image Text</div>
</div>
</div>
</div>
While this doesn't get the borders to line up properly this does get the image centered and the text to the left of the image.
Try this:
div.image { margin: auto }
If you're only interested in centering on this one div, you can use the text-align: center in the parent:
#arbitrary
{
width: 750px;
border: 1px solid #000000;
text-align: center;
}
<div id="arbitrary">
<div id="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png">
</div>
</div>
If you are trying to center .image div the Try using this CSS:
.container
{
overflow: hidden;
margin: 0 auto
}
.container .image
{
margin: 0 auto
}
Related
I would like the button to be positioned at the bottom right of the red colored div. I used padding-bottom and margin-bottom properties but that does not seem to work. Could anyone please help?
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
.button {
float: right;
position:relative;
transform:translate(-5px,-25px); //x and y controls
}
I have just answered the same thing to other question. ... Use position:relative. I see the point why people refrain from using it. But really ain't no shame. Especially when there isn't a parent-child relation between the elements.
.container {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
border: 1px solid blue;
padding: 8px;
}
.box {
width: 300px;
height: 150px;
border: 1px solid red;
}
.button {
float: right;
position:relative;
top: -22px;
}
<div class="container">
<div class="box">
</div>
<div>
<button class="button">Click</button>
</div>
</div>
An alternative to the other answers using display: grid instead. This is easier for the browser than using position absolute or float!!
/* ignore */ body { margin: 0 } * { box-sizing: border-box } /* ignore */
.container {
display: grid;
width: 50vw;
height: 100vh;
border: 1px solid blue;
padding: 8px;
}
.box, .button { grid-area: 1/1/-1/-1 }
.box { border: 1px solid red }
.button { margin: auto 0 0 auto }
<div class="container">
<div class="box">
</div>
<div class="button">
<button>Click</button>
</div>
</div>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I drew this in microsoft paint and wanted to make this in html/css
The numbers labeled are the box numbers
This is what I've done to try to achieve this
html file
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
<div id="box8"></div>
</div>
</body>
</html>
css file
html, body {
margin: 0px;
height: 100%;
width: 100%;
}
#box1 {
border: solid black 3px;
height: 10%;
}
#box2 {
border: solid black 3px;
height: 3%;
}
#box3 {
border: solid black 3px;
height: 84%;
}
#box4 {
border: solid black 1px;
width: 50%;
height: 95%;
float: left;
margin: 5px;
}
#box5 {
border: solid black 1px;
width: 23%;
height: 25%;
float:left;
margin-left: 10px;
margin-top: 6px;
}
#box6 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
#box7 {
border: solid black 1px;
width: 23%;
height: 30%;
float:left;
margin-top: 10px;
margin-left: 10px;
}
How it looks
I couldn't get box8 to show up on the right side I tried float right it messes it up. Also the boxes inside box3 are all inconsistent. If I full screen the boxes go right side. I used percentages for responsiveness but it didn't work. Anyone know how to do this ?
This can be achieved with flexbox - but note that you will need to use wrapper divs and apply different flex-directions to each in order to make the grid layout work.
body, html {
height: 100%;
width: 100%;
overflow: hidden;
}
.box-wrapper {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
#box1 {
padding:10px;
height:30px;
line-height:30px;
border: solid 1px red
}
#box2 {
height: 15px;
padding: 8px;
border: solid 1px blue
}
#box3 {
padding: 10px;
flex-grow:1;
display: flex;
flex-direction: row;
border: solid 1px green
}
#box4 {
flex-grow:2;
border: solid 1px orange
}
.middle-column {
flex-grow:1;
display: flex;
flex-direction: column;
}
.middle-column div{
flex-grow:1;
margin: 0 8px;
border: solid 1px #6e6e6e;
}
.middle-column div + div {
margin-top: 8px
}
#box8 {
flex-grow:1;
border: solid 1px black
}
<div class="box-wrapper">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">
<div id="box4">4</div>
<div class="middle-column">
<div id="box5">5</div>
<div id="box6">6</div>
<div id="box7">7</div>
</div>
<div id="box8">8</div>
</div>
</div
I just started learning CSS, now stuck at this part. what makes the brand class to move down when information class is inline-block-ed? Doesn't information comes after brand so it shouldn't affect the brand class?
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF
</div>
<div class="information">
</div>
</div>
<div class="mainbody">
</div>
By default the vertical-alignment of text is baseline. The difference in the height is what makes it. If you have this CSS rule:
vertical-align: top;
Or whatever it is perfect, it looks alright. See below:
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
And now the difference or the white line is because of the border, which can be made by using box-sizing: border-box.
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
}
.header {
height: 34px;
background-color: #ACDACD;
}
.brand {
border: 2px solid red;
height: 34px;
display: inline-block;
}
.information {
border: 2px solid blue;
height: 34px;
display: inline-block;
vertical-align: top;
}
<div class="header">
<div class="brand">AKKJKJKJKJKJFKJDKFJDKJF</div>
<div class="information"></div>
</div>
<div class="mainbody">
</div>
First of all, it's different from others questions because I can't use position: absolute; as I used usually because of my jQuery plugin (I don't use this plugin in the example, but I have to do position: relative; to the inside-table).
JSFIDDLE: https://jsfiddle.net/h8ywumbk/
HTML:
<div id="table">
<div id="inside-table" >
<span>Hello</span>
</div>
</div>
CSS:
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
}
#inside-table span {
position: relative;
top: 50%;
transform: translateY(-50%);
}
I'm trying to center the text (not a single line) vertically and horizontally on the tables. Any suggestions?
Just use flexbox
#table {
width: 100%;
height: 100px;
border: solid 1px black;
background-color: transparent;
}
#inside-table {
position: relative;
width: 98%;
height: 80px;
background-color: transparent;
border: solid 1px black;
margin: 0 auto;
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
#inside-table span {
}
<div id="table">
<div id="inside-table">
<span>Hello</span>
</div>
</div>
Try this:
.table {
display: table;
width: 100%;
}
.td {
display: table-cell;
vertical-align: middle;
}
<div class="table">
<div class="td">
text
</div>
<div class="td">
<img alt="" src="http://url style="width: 120px; height: 148px;" />
</div>
</div>
I got it centered like this:
#inside-table span {
position: relative;
top: 50%;
left: 50%;
}
You can always mess with the percentages if you want it shifted one direction or another
I'm trying to build a 3 column div and center all of them inside a wrapper but the div.left and div.right wont stay at the top when the div.middle has text in & when i replace display: inline-block to float: left they stop centering, what could i do so they all center and stay at the top?
example
the html:
<div class="left">
</div>
<div class="middle">
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
example <p>
</div>
<div class="right">
</div>
</div>
</body>
the css:
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
Try using vertical-align
Working Example
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
vertical-align: top; /* see here */
}
MDN documentation for vertical-align
Just do vertical-align: top; on the left/right like this:
http://jsfiddle.net/RJR2V/2/
But if you want them to be even in heights than I suggest display: table-cell;
Like this:
http://jsfiddle.net/RJR2V/1/
under .wrapper all div should be vertical-aligned to top
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
div.left, div.right {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 18%;
padding: 1px;
background: red;
}
div.middle {
margin: 3px;
border: 1px solid #0000ff;
display: inline-block;
width: 60%;
padding: 1px;
background: red;
}
.wrapper div{
vertical-align:top;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="middle">
example <p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
example
<p>
</div>
<div class="right">
</div>
</div>
</body>
</html>