I have a parent div, and inside there are multiple divs that I want centered vertically.
<div id="main">
<div id="picBox">
<img src="imageurl">
</div>
<div id="lines">
Line 1<br> Line2
</div>
<div id="other">
Right side text
</div>
</div>
The CSS I have set to
#main {
border: 1px solid #FF0000;
height: 100px;
width: 500px;
vertical-align: middle;
display: table-cell;
}
#picBox {
height: 90px;
width: 75px;
background-color: #000;
float: left;
position: relative;
margin-right: 3px;
display: inline-block;
}
#picBox img {
position: relative;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
display: inline-block;
}
#lines {
font-size: 20px;
float: left;
background-color: #999;
display: inline-block;
}
#other {
float: right;
margin-right: 3px;
background-color: #6666DD;
display: inline-block;
}
I can't seem to get the divs within the main div to center vertically, with the exception of the first 'picBox' div.
Is there a way to vertically center the other divs as well?
Here's my jfiddle example:
http://jsfiddle.net/3ffda7ua/2/
Do something like:
#main {
... //Keep your other rules
position: relative;
}
#main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And handle your other positioning with left: whatever.
JSFiddle example
why don't you use flex-box to align it, using a class like this one on the parent:
.flex-center-center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Related
i have two divs, i want to put the child on top of the parent top, i was trying but the child div got stuck outside, what is the wrong?
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
Parent element needs to have position: relative.
Add position: relative to the parent class .content to make the child div inside the parent div.
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
position: relative; //Add this line
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
I have a div with a text on the left part of it:
* {padding: 0%;margin: 0%;}
body {background-color: brown;}
.content_box {
height: 100%;
display: flex;
flex-direction: row;
background-color: brown;
padding: 1em;
border-radius: 0.5rem;
}
.content_box div {
display: flex;
flex-direction: column;
overflow: hidden;
margin-right: 1rem;
}
.content_box img {
object-fit: cover;
width: 30%;
/*height: 100%;
width: auto;
max-width: 100%;*/
}
.content_box .credentials {color: beige;}
.content_box .left {margin-left: auto;}
.content_box .right {margin-right: 100px;}
<div class='content_box'>
<div class='left'>
<div class='credentials'>Username</div>
<p>Posted message</p>
<div class='credentials'>01/01/2021</div>
</div>
<div class='right'>
...
</div>
</div>
I want to add an image on the right part of it. But it has to be set to the size of text(so if we have three lines of text image will be bigger than if we had one line of text, even if the image with 3 lines is 30x30 pixels, and 1 line text is 1024x1024 pixels)
I would love it if someone could edit my question because I'm not too good at English...
You could position the .content_box relative and the .right div absolute. So you can give it the height of it's parent. Finally give the image a max-height of 100%:
.content_box {
position: relative;
height: auto;
}
.right {
position: absolute;
height: 100%;
width: auto;
top: 0;
right: 0;
background-color: red;
}
.right img {
max-height: 100%;
width: auto;
}
I am trying to give one of my container divs rounded edges, using the border-radius property. However, when I do this, the textareas that are being rendered within the container div block the bottom left and right corners of the div. How can I adjust my css such that this no longer happens, and that the text areas work the way I want?
App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
render() {
return (
<div className="screenDiv">
<div className="topContainer">
<div className="textContainer">
<div className="textBoxes">
<div className="leftTextBox">
<textarea className="myText" />
</div>
<div className="rightTextBox">
<textarea className="myText" />
</div>
</div>
<div className="languageDisplay">
<div className="inputLanguage">
<p>English</p>
</div>
<div className="outputLanguage">
<p>Spanish</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
App.css
.screenDiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.topContainer {
height: 80%;
}
.botContainer {
height: 20%;
border-top: 1px solid black;
}
.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
width: 100%;
display: flex;
justify-content: space-between;
}
.textBoxes {
height: 50%;
position: relative;
top: 50%;
border: none;
display: flex;
}
.textContainer {
width: 80%;
height: 36%;
position: relative;
top: 30%;
left: 10%;
right: 20%;
border: 1px solid #161515;
display: flex;
justify-content: space-between;
border-radius: 3%;
}
.languageDisplay {
height: 50%;
position: absolute;
top: 0%;
bottom: 50%;
display: flex;
justify-content: space-between;
}
.inputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
left: 20%;
}
.outputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
right: 20%;
}
.leftTextBox,
.rightTextBox {
width: 50%;
height: 100%;
display: inline-block;
border: none;
}
.myText {
box-sizing: border-box;
width: 100%;
height: 100%;
border: none;
}
As you are adding a border-radius to your <div />, it is actually "curving in" on the space the div has which is causing the text area inside to overflow the container.
There are two ways I can see to deal with this. You could add a padding to the textContainer div:
padding: 1rem;
Or you could hide all overflow - meaning the inner text area would be hidden instead of being placed over the border of the textContainer div.:
overflow: hidden;
This should keep the border intact.
If you provide some padding to .textContainer, it will solve your problem.
You can also add border-radius to your textboxes if you do not want to give padding to .textContainer
How do I vertically center divs inside their container using flexbox if those divs have background images attached to their :after pseudo-element?
On Chrome 33 these divs align to the top: http://jsfiddle.net/6SQ6W/
HTML:
<div id="container">
<div id="left_and_right">
<div>Left</div>
<div>Right</div>
</div>
</div>
CSS:
#container {
height: 300px;
width: 300px;
background: blue;
color: white;
position: relative;
}
#container #left_and_right {
position: absolute;
height: 100%;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
}
#container #left_and_right div, #container #left_and_right div:after {
height: 50px;
width: 100px;
}
#container #left_and_right div {
background: green;
/* THIS PREVENTS VERTICAL CENTERING BUT SEEMS NEEDED FOR THE REST OF THE STUFF */
position: absolute;
}
#container #left_and_right div:after {
content:"";
position: absolute;
background-image: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif);
text-indent: -9999px;
left: 0;
}
#container #left_and_right div:nth-of-type(2) {
right: 0;
}
Hi I am currently working on a project that has lots of DIVs and sections and such.
I am currently having problems with my header. The search bar and the panes div are going down or going out from the "header" section when I'm trying to minimize the browser window.
Structure goes like this.
As you can see on the image above, the red part is the header and it has 3 divs inside it.
This is how it goes on the view:
<div id = "header" class = "fixed-top">
<div class = "wrapper">
<div id = "logo">
</div>
<div id = "search-box">
</div>
<div id = "panes">
</div>
</div>
</div>
The header's width is 100% and having a class of position-fixed.
The wrapper class has a width of 980px and margin is 0 auto/auto centre. I also made its position to absolute.
The logo style looks like this:
#logo {
width: 130px;
height: 45px;
float: left;
background:url(image.png);
position: relative;
margin: 4px 0 0 2px;
}
The search bar on the other hand looks like this:
#search-box {
width: 440px;
padding: 2px 8px;
float: left;
position: relative;
margin-left: 90px;
}
Lastly, the panes style is:
#panes {
float: right;
width: 170px;
height: 48px;
position: relative;
margin-right: 10px;
}
And by the way, the search-box div also have child divs. And panes div has a UL list and each LIs are floated left.
Is there anything I am missing out why this happens?
I also tried the "clearfix" but it is still happening.
Thanks.
Just Try This CSS code, it will work nice
*{
margin:0;
padding:0;
}
#header{
background-color:#ED1C24;
width:740px;
float:left;
}
#logo {
width: 124px;
height: 45px;
background:url(image.png);
position: relative;
margin: 4px 0 0 2px;
float:left
}
#search-box {
width: 420px;
margin-left:20px;
position: relative;
float:left
}
#panes {
width: 160px;
height: 48px;
position: relative;
margin-right: 10px;
float:left
}
Like this
DEMO
CSS
* {
margin: 0;
padding: 0;
}
#header {
background-color: #ED1C24;
display: table;
vertical-align: middle;
}
#logo {
width: 130px;
height: 45px;
background: url(image.png);
position: relative;
margin: 4px 0 0 2px;
display: table-cell;
}
#search-box {
width: 440px;
padding: 2px 8px;
position: relative;
margin-left: 90px;
display: table-cell;
}
#panes {
width: 170px;
height: 48px;
position: relative;
margin-right: 10px;
display: table-cell;
}