I just want to align two divs next to each other and aligning the content vertically middle in each. Any help could save my mental health. Here is my code:
.main-kozossegitag-container {
display: block;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: inline-block;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
As you see the two divs are next to each other, but I can not align the text vertically in the middle :(
.main-kozossegitag-container {
display: table;
width: 100%;
height: 100%;
}
.main-kozossegitag-text1 {
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
}
.main-kozossegitag-nev {
font-size: 2em;
}
.main-kozossegitag-title {
font-size: 1em;
}
.main-kozossegitag-visszhang {
font-size: 1em;
}
.main-kozossegitag-image1 {
display: table-cell;
vertical-align : middle;
width: 39%;
}
.profilkep {
max-width: 100%;
height: auto;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}
<div class="main-kozossegitag-container">
<div class="main-kozossegitag-text1">
<h3 class="main-kozossegitag-nev">Rita</h3>
<p class="main-kozossegitag-title">CEO</p>
<p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
</div>
<div class="main-kozossegitag-image1">
<img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
</div>
</div>
I added display : table; to your main container (main-kozossegitag-text1) and display : table-cell; vertical-align : middle to your both sub-div. Those properties let them have the same behaviour as a table and cells that contains vertically aligned content. I just messed up with some left/right margin but the rest seems to work.
Add Vertical-align to the second Div.
.main-kozossegitag-image1 {
display: inline-block;
width: 39%;
vertical-align: middle;
}
Please see my fiddle here.
I used CSS3 flex-box model. I changed properties for these classes:
.main-kozossegitag-container {
display: flex;
align-items: stretch;
flex-flow: row wrap;
width: 100%;
height: 100%;
border: 1px solid red;
}
.main-kozossegitag-text1 {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: flex-end;
align-content: flex-end;
box-sizing: border-box;
width: 60%;
padding-right: 20px;
}
More on CSS3 flex-box here.
Just add a float-left to this div :
.main-kozossegitag-text1{
display: table-cell;
vertical-align : middle;
width: 60%;
height: 100%;
vertical-align: middle;
text-align: right;
float: left;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
I've looked everywhere (for days..) but couldn't find a solution working for me so here I am..
I've created some sort of square, divided in 4 div, squares I all want responsive.
Here is a drawing
As I can't set any div heigh, I can't get the text of the "text-slider" and "text-produits" div in the center. Does anybody know how to do this ? Thank in advance!
.slider {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: 100%;
justify-content: center;
position: relative;
}
.slider-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.produits {
display: table;
width: 100vw;
margin-left: calc(-50vw + 50%);
height: auto;
justify-content: center;
vertical-align: middle;
text-align: center;
position: relative;
}
#media screen and (min-width: 850px) {
.text-slider {
display: table-cell;
width: 30%;
vertical-align: middle;
text-align: center;
}
.grid-cuisine {
display: table-cell;
justify-content: center;
align-items: center;
position: relative;
width: 45%;
}
.grid-produits {
display: table-cell;
width: 30%;
justify-content: center;
}
.text-produits {
display: table-cell;
width: 45%;
vertical-align: middle;
text-align: left;
padding: auto;
}
}
<div class="row slider d-flex justify-content-center" id="photos">
<div class="text-slider">
<div>
Nunc euismod eget...
</div>
</div>
<div class="grid-cuisine">
<div class="slider-wrapper">
...
</div>
</div>
</div>
<div class="row produits d-flex justify-content-center" id="produits">
<div class="grid-produits">
<img src="images/combo-alpha.svg" alt="..." class="image-produits">
</div>
<div class="text-produits">
Lorem ipsum dolor...
</div>
</div>
You can use flexbox for this - I have commented css below:
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row; /* align children in rows */
flex-wrap: wrap; /* allow wrapping of children for multiple rows */
width: 50%; /* change to width you want */
margin: 0 auto;
border-left: 5px solid black;
border-bottom: 5px solid black;
}
.container>div {
border-right: 5px solid black;
border-top: 5px solid black;
padding:20px;
display:flex; /* make children flex too for centering */
align-items:center; /* vertical center */
justify-content:center; /* horizontal center */
}
.left-col {
width: 30%;
}
.right-col {
width: 70%;
}
<div class="container">
<div class="left-col">
top left content over multiple lines
</div>
<div class="right-col">
top right
</div>
<div class="left-col">
bottom left content over multiple lines
</div>
<div class="right-col">
bottom right
</div>
</div>
Grid + Flex
html, body {
margin: 0;
height: 100%
}
.grid-container * {
border: 1px solid #ccc;
}
.grid-container div {
display: flex;
justify-content: center;
align-items: center
}
.grid-container div:after {
content: attr(class);
color: #888;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: arial;
}
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: '. .' '. .';
}
<div class='grid-container'>
<div>Text Slider</div>
<div>Grid-cuisine</div>
<div>Grid Produits</div>
<div>Text-produits</div>
</div>
.main-content{
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar{
width: 18%;
margin-right: 3%;
img{
width: 100%;
border: solid white 2px;
}
}
.profile-username{
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec{
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.profile-image-container{
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
>> This is where the images go <<
</div>
</div>
EDIT: added in code snippit, Hope it helps
I trying to create a horizontal scroll div but when i add the content images all it does is squeeze all the images inside of it like so,
So its resizing the images to fit in but i would like them to be normal size and be able to scroll.
Now i tried to add overflow scroll but its not having that effect
.profile-third-sec{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 8%;
height: 30vw;
background-color: $font-grey;
overflow-x: scroll;
}
.profile-image-container{
display: flex;
align-items: center;
}
Now i thought i knew enough on this to be able to do but obviously not! So any ideas will be appreciated.
Thanks
You can remove the flexbox rules. Then provide the image with some properties. Using white-space and overflow should work for you.
example:
.main-content {
height: 100%;
width: 60%;
min-height: 800px;
background-color: white;
border-radius: 5px;
margin-left: 1%;
border: solid 1px black;
}
.profile-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 7vw;
margin-top: 7%;
background-color: rgba(71, 135, 195, 0.5);
}
.profile-avatar {
width: 18%;
margin-right: 3%;
img {
width: 100%;
border: solid white 2px;
}
}
.profile-username {
margin-left: 5%;
font-size: 4vw;
color: $font-blue;
font-family: 'Titillium Web', sans-serif;
-webkit-text-stroke: 1px white;
}
.profile-second-sec {
margin-top: 8%;
height: 20vw;
background-color: blue;
}
.profile-third-sec {
margin-top: 8%;
height: 30vw;
background-color: grey;
overflow-x: scroll;
white-space: nowrap
}
.prgile-third-sec img {
display: block;
width: 100%;
height: auto;
}
.profile-image-container {
display: flex;
align-items: center;
}
<div class="main-content">
<div class="tab-header font-large">
<i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
<div class="profile-username">
User profile
</div>
<div class="profile-avatar">
Avatar image
</div>
</div>
<div class="profile-second-sec">
</div>
<div class="profile-third-sec">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300">
<img src="https://unsplash.it/300"></div>
</div>
Flex have default wrap property, you can try on your code based on following stylesheet.
.className {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.class {
display: flex;
flex-wrap: nowrap;
}
If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}
How am I able to center vertically both the form and the and div next to it? I need to be able to scroll if the container of both is smaller than the inner content height space.
HTML:
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request">
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
CSS:
#outer_1 {
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1 {
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form {
text-align: center;
vertical-align: middle;
}
#login-request {
text-align: center;
vertical-align: middle;
}
Please consider this JSFiddle.
Can't you just fix this with a float:left on both divs?
JSFiddle: http://jsfiddle.net/4vtf5cn6/6/
Added lines are marked with **, so don't just copy the below code ;)
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
**padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
Result:
try this, the form and the message both are horizontally and vertical center aligned, look at it in
http://jsfiddle.net/4vtf5cn6/10/
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
<div id="login-request" class="login-request-alert">
If you do not have a Travelport Mobile Agent login,
<span class="urlink">touch here</span>
</div>
</form>
</div>
</div>
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
An option could be percentage values for margin-top property of CSS rule. For example:
.container {
width: 150px;
height: 200px;
border: 3px solid orange;
}
.child {
/* Center horizontally */
margin-left: auto;
margin-right: auto;
/* Center vertically */
margin-top: 50%;
width: 30px;
height: 40px;
border: 3px solid yellowgreen;
}
<div class="container">
<div class="child"></div>
</div>
The easiest way is to add a <div>, which encloses the #form and the #login-request. Like:
<div id="outer_1">
<div id="inner_1">
<div id="enclose">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request" >
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
</div>
and in the CSS:
#enclose {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow-y: auto;
}
and style the #form and the #login-request as you need it
try this DEMO
#form{
display: inline-block;
text-align: center;
vertical-align: middle;
}
#login-request{
display: inline-block;
text-align: center;
vertical-align: middle;
}