I have two divs, side by side, where one (right) has more content that the other (left). I've been trying to have the left one, horizontally align with the right one, so they both can be on one line. Like the drawing below.
Here is my code:
.allinside {
display: flex;
vertical-align: top;
}
.profile_part {
background-color: #a7f996;
border-radius: 25px;
width: 18%;
margin: 0 10px 0 10px;
margin-right: auto;
}
.mid_part {
background-color: #a7f996;
border-radius: 25px;
width: 70%;
margin: 0 10px 0 10px;
margin-left: auto;
}
.textinside {
padding-bottom: 10px;
text-align: center;
}
<div class="allinside">
<div class="profile_part">
<img id="mimi" src="img/profilepic.gif" alt="Maria" />
<p class="textinside">Maria's choices</p>
</div>
<div class="mid_part">
<h2>The last book I read:</h2>
<img src="img/bravenewworld.jpg" alt="Brave new world" />
<p class="textinside">SOME TEXT INSIDE</p>
<h2>My favourite book:</h2>
<img src="img/searchformeaning.jpg" alt="Man's search for meaning" />
<p class="textinside">SOME TEXT INSIDE</p>
</div>
Getting to know the display types might help(inline, inline-block, block, flex)
Here, the flex at the parent is causing the elements to stretch.
Try inline-block
.allinside{
}
.profile_part{
background-color: #a7f996;
border-radius: 25px;
width: 18%;
margin: 0 10px 0 10px;
margin-right: auto;
vertical-align:top;
display:inline-block;
}
.mid_part{
background-color: #a7f996;
border-radius: 25px;
width: 70%;
margin: 0 10px 0 10px;
margin-left: auto;
display:inline-block;
}
.textinside{
padding-bottom: 10px;
text-align: center;
}
set
.allinside {
display: flex;
align-items: flex-start;
}
.profile-part, .mid-part {
margin: 0 auto;
}
Related
so I really tried using float and inline to align my boxes next to each other.
Here is an example of what I have.
What I am trying to do is move the CSS section with the information next to the HTML section.
Here is my html and css files for these parts.
/* SECOND SECTION */
.content2 {
border: 4px solid black;
padding: 20px;
overflow: hidden;
margin-top: 1%;
margin-left: 2%;
margin-right: 50%;
}
.content2 img {
margin-right: 15px;
float: left;
height: 250px;
width: 400px;
}
.content2 h3,
.content2 p {
margin-left: 15px;
display: block;
margin: 2px 0 0 0;
}
/* THIRD SECTION */
.content3 {
border: 4px solid black;
padding: 20px;
overflow: hidden;
margin-top: 1%;
margin-left: 50%;
margin-right: 2%;
}
.content3 img {
margin-left: 15px;
float: right;
height: 250px;
width: 400px;
}
.content3 h3,
.content3 p {
margin-right: 15px;
display: block;
margin: 2px 0 0 0;
}
<!--SECOND SECTION-->
<div class="content2">
<img src="./resources/images/html.jpeg" alt="">
<h2>HTML</h2>
<p>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</p>
</div>
<!--THREE SECTION-->
<div class="content3">
<img src="./resources/images/css.jfif" alt="">
<h2>CSS</h2>
<p>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.</p>
</div>
I tried finding the answer, sorry if its an easy fix. I just couldn't get it to work and I am very new to coding. Thank you.
Wrap both in a div and use flexbox:
/* SECOND SECTION */
body {
width: 100vw;
margin: 0;
}
.flex {
display: flex;
width: 100vw;
justify-content: flex-start;
}
.content2 {
border: 4px solid black;
padding: 20px;
overflow: hidden;
width: 50%;
margin-top: 1%;
margin-left: 2%;
}
.content2 img {
margin-right: 15px;
float: left;
height: 250px;
width: 400px;
}
.content2 h3,
.content2 p {
margin-left: 15px;
display: block;
margin: 2px 0 0 0;
}
/* THIRD SECTION */
.content3 {
border: 4px solid black;
padding: 20px;
overflow: hidden;
margin-top: 1%;
margin-right: 2%;
width: 50%;
}
.content3 img {
margin-left: 15px;
float: right;
height: 250px;
width: 400px;
}
.content3 h3,
.content3 p {
margin-right: 15px;
display: block;
margin: 2px 0 0 0;
}
<div class="flex">
<div class="content2">
<img src="./resources/images/html.jpeg" alt="">
<h2>HTML</h2>
<p>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</p>
</div>
<!--THREE SECTION-->
<div class="content3">
<img src="./resources/images/css.jfif" alt="">
<h2>CSS</h2>
<p>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.
</p>
</div>
</div>
I've got to center an image within a div-container with fixed sizes.
My first idea was: img is an inline-element. So you can use text-align: center. As with text.
But that doesn't work.
I've made this demo:
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
One can see: Text centering works perfectly. But image centering fails.
What did I do wrong here? Respectively: Which of my assumptions are wrong?
.wrap {
text-align: center;
}
use this
text-align affects the inline content of an element.
The image isn't the content of the <img>, it is the <img>.
For text-align to affect it, you must apply the property to the parent of the <img>.
hi img is inline eliment so you can not add text-align: center; to image
add parent div to check this
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
text-align: center;
}
.wrap p {
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Your .wrap class should have text-align: center
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
Just add this to your CSS
img {
display: block;
margin: 0 auto;
}
Just add
margin: 0 auto;
display: block;
Thus it should be :
.wrap img {
border-radius: 12px;
margin: 0 auto;
display: block;
}
Or you can also add text-align:center to .wrap
Here is the fiddle:
Add style in wrap in class text-align: center;
.wrap {
height: 1000px;
width: 1000px;
background-color: lightGrey;
margin: 20px auto;
border: 1px solid black;
text-align: center;
}
.wrap img {
border-radius: 12px;
}
.wrap p {
text-align: center;
font-size: 2rem;
font-weight: 900;
}
<div class="wrap">
<img src="https://placebear.com/200/300" alt="bild" />
<p>Just a little bit of placeholder-text.</p>
</div>
I've got three DIVs that I've put into a container DIV.
What I want is as follows:
Here's where I'm up to:
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
}
#leftdiv {
float: left;
padding: 0 20px;
/*margin:20px 0;*/
position: relative;
width: 25%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align: middle;
width: 100%;
text-align: center;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height: 40px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv">
<p id="light-table-paragraph">Left</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Middle</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Right</p>
</div>
</div>
</div>
Please can someone help tell me where I'm going wrong?
Thanks!
Scott
set the div the contains the three small divs display:flex and give it 75% width of the container, then set space around the content as follow:
#leftdiv {
/*float: left;*/
padding:0 20px;
/*margin:20px 0;*/
position:relative;
/* edits */
width:33.33%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align:middle;
text-align: center;
/* edits */
width:75%;
display: flex;
margin: 0px auto;
justify-content: space-around;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height:40px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top:30px;
margin-bottom: 30px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv"><p id="light-table-paragraph">Left</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Middle</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Right</p></div>
</div>
</div>
Here's how I would do it.
Give each .leftdiv (indeed this should be a class, id's are unique) 33% of total viewport width:
.leftdiv {
float: left;
width: 33%;
}
and center each paragraph inside these divs, give it 75% width:
.leftdiv p {
display: block;
width: 75%;
margin: 0 auto !important; /* you won't need !important if your code is well structured */
}
This is a cleaner solution, as you'll notice there is no horizontal scroll present.
Here is a codepen.
Also, you need to clear your parent div #leftdivcontainer (did that as well).
Hope this helps.
I have a p element inside two circles with borders and need to center the p element based on the width of the circles however I want to cause the p element to break into two lines without needing to create two p elements so I used a max-width. I believe that this is causing it not to center, but I could be wrong. If anyone knows a good hack to get around this please enlighten me
DEMO
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
max-width: 100px;
}
Your 100px wide <p> is block-level, so it will not follow the inline text-align: center rule. You need to give it an automatic left-right margin to put it in the horizontal center:
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
}
Once you do this, you'll notice it sits a bit too far to the right. That's because your first word is wider than the 100px limit (I measure about 140px) and the browser will not wrap inside a word.
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
text-align: center;
}
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>
if you go and reduce the width of the window to view the screen as if it were a mobile device you can see that the orange "badges" may not be entered (especially when only one badge fits per line) I want it to fit more badges in if possible whilst always keeping the badge, or group of badges on that line entered horizontally. The class is badge that isn't being centered Thank you in advance!! :)
jsfiddle: http://jsfiddle.net/avg24wrk/
This is the HTML
<div class="container">
<div class="sidebar">
<div class="sidebar-inner">
<p class="badge"><span class="vertical-align">Book a Free Consultation!</span></p>
<p class="badge"><span class="vertical-align">Second Point</span></p>
<p class="badge"><span class="vertical-align">Third Point</span></p>
</div>
</div>
and this is the CSS
* {
border: 0;
margin: 0;
padding: 0;
}
.sidebar {
float: left;
width: 25%;
color: #505050;
}
.sidebar-inner {
margin: 0 30px 0 35px;
}
.badge {
margin: 10px auto;
font-size: 24px;
text-align: center;
border-radius: 7px;
padding: 20px 20px;
background-color: #ed9727;
cursor: pointer;
}
#media screen and (max-width: 490px) {
.sidebar {
width: 100%;
}
.sidebar-inner {
padding-bottom: 20px;
border-bottom: 2px solid #505050;
margin: 0 30px;
overflow: hidden;
}
.badge {
float: left;
margin: 15px 10px;
max-width: 150px;
min-height: 50px;
display: table;
}
}
have you tried adding text-align: center; to class you want to center
since i you didn't mention which class you want to center so i will give you a simple rule try this
please mention class you want to center