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
Related
I want to recreate the following structure:
With black is div container and inside the container on the left there will be text and on the right i need an image bigger than the container.
I tried to do this by grids but things got funky real quick.
As it seems to be important that the containing div maintains the dimensions (as shown by its border), this snippet adds in the actual image as a background on a pseudo element that is absolutely positioned.
That way the protruding bit of image does not alter the container div dimensions.
Here's a simple snippet using a grid to position the left and right sides. Of course you will want to alter proportions to suit your particular case, add styling to the leftside and so on:
.container {
display: grid;
grid-template-columns: 3fr 2fr;
width: 50vw;
height: auto;
margin-top: 10vh;
border: solid 2px black;
}
.leftside {
padding: 1vw;
}
.rightside {
position: relative;
width: 100%;
height: 100%;
}
.rightside::before {
content: '';
background-color: pink;
background-image: url(https://picsum.photos/id/1015/500/200);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 50%;
height: 140%;
bottom: 0;
left: 25%;
position: absolute;
}
<div class="container">
<div class="leftside">
<h2>Heading</h2>
<div>text1</div>
<div>text2</div>
</div>
<div class="rightside"></div>
</div>
go with the flexbox.
.main-container{
display:flex;
display: flex;
justify-content: space-evenly;
border:1px solid black;
margin:30px;
height:300px;
padding:10px;
}
.image{
width:50vw;
position:relative;
}
img{
width:100%;
height:150%;
width: 100%;
height: 150%;
top: -50%;
position: absolute;
}
.text{
display:flex;
align-items:center;
}
<div class="main-container">
<div class="text">
<p>Somthing Somthing</p>
</div>
<div class="image">
<img src="https://loremflickr.com/640/360" />
</div>
</div>
Here you go:
.background {
padding: 25px;
display: flex;
border: 1px solid black;
height: 150px;
position: relative;
margin-top: 50px;
}
.text {
border: 1px solid green;
width: 50%;
padding: 10px;
}
.img {
text-align: center;
width: 50%;
display: flex;
justify-content: center;
}
.img>div {
border: 1px solid blue;
width: fit-content;
padding: 10px;
height: 200px;
position: absolute;
bottom: 25px;
}
<div class="background">
<div class="text">
<p>
text1
</p>
<p>
text2
</p>
<button>
Click me
</button>
</div>
<div class="img">
<div>
me img
</div>
</div>
</div>
Hope this helps
I have 6 s inside a parent
The height of the internal divs change dynamically based on the underlying data.
The outer Div has a set height.
What I want is that when one of the internal Divs no longer fit (heightwise) in the parent that it should just move over to a "new column" inside the parent Div
Here is a short snippet with my situation:
#outer {
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Here is another snippet of how I would want it to appear:
#outer {
float:left;
min-width: 100px;
width: 100px;
max-width: 200px;
height: 96px;
max-height: 96px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
<div id="outer">
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
Can anyone suggest anything?
Thanks
Flex wrapping can easily solve this problem.
[If you're using bootstrap, you don't need to write the css written in '*' selector]
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#outer {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 90px;
background-color: #ddd;
position: relative;
}
#outer div {
width: 100px;
height: 30px;
border: 1px solid black;
text-align: center;
}
<div id="outer">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
<div>Item4</div>
<div>Item5</div>
<div>Item6</div>
</div>
So what im trying to do is have three vertical lines separating images in columns on a website however every time i go out of the editor and preview the website the position of the lines seems to change. I am not sure if this is because i have missed something or have a fault so please help me i am new to html and css
:/
div#left {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: 400px;
position: absolute;
}
div#leftt {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: -10px;
position: absolute;
}
div#right {
background-color: clear;
width: 50%;
height: 70%;
float: left;
border-left: 1px solid black;
top: 275px;
margin-left: 810px;
position: absolute;
}
<div id="container" style="background-color: clear; width: 100%; height: 80%;">
<div id="left">
</div>
<div id="leftt">
</div>
<div id="right">
</div>
</div>
I strongly recommend you to use flex positioning.
You can learn more about Flex following this link.
.container {
display: flex;
}
.container > * {
flex: 1;
text-align: center;
}
.container > *:nth-child(2) {
border: 0 solid black;
border-width: 0 1px;
}
<div class="container">
<span>item 1</span>
<span>item 2</span>
<span>item 3</span>
</div>
another newbie question here. Learning CSS. I am trying to do something that I thought would be very simple, but have not managed to find the way to do it, or a suitable answer to the question.
I have a simple project with a header, some content and a footer. The content has a div with a white border and an image inside it. I would like the div to be as wide as the image and no wider. I have provisionally set the width to 430px, but I would like to know the code to set the width to whatever the width of the image is.
Code
html
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
border: 1px solid white;
width: 430px;
display: block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Add display: inline-block; to your .imagewrap without setting it's width.
.imagewrap {
display: inline-block;
}
If you want a div with an image to be centered, add another div around them with:
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
But do you really need that div around an image? The border might be added to an image itself without additional div.
If you want a border on the image, add it there
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap {
position: relative;
/*border: 1px solid white;
width: 430px;
display: inline-block;
line-height: 0;
margin: 0 auto;*/
top: 50%;
transform: translateY(-50%);
text-align: center; /*center image horizontally*/
}
#imagewrap img {
border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="https://unsplash.it/100/100" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
Check out this fidde:
https://jsfiddle.net/56myv9g2/1/
#imagewrap img{
display:block;
}
#imagewrap{
position: relative;
border: 1px solid white;
display: inline-block;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
#container {
height: 80%;
width: 100vw;
text-align:center;
background-color: red;
}
Also, you could just give the border to the image tag all along without the div
If you set display: inline-block, then you need to add text-align: center to container
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#footer {
position: relative;
height: 10%;
width: 100%;
background-color: lightgray;
}
#container {
text-align: center;
height: 80%;
width: 100vw;
background-color: red;
}
#imagewrap{
position: relative;
border: 1px solid white;
width: 430px;
display: inline-block;
top: 50%;
transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
<div id="imagewrap">
<img src="Images/01Folder/Image.jpg" height="100%" id="front" />
</div>
</div>
<div id="footer"> </div>
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
}