Text Is Not Aligning Properly In HTML/CSS
Question
Hello there I want to include a blog post card in my website, and I want the text to be under each other but even after I set text:align: justify; it still does not work. Why?
My HTML/CSS of the card:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .container1{ display: flex; justify-content: center; padding: 80px; }.square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }.square{ width: 460px; height: 430px; background: white; border-radius: 4px; box-shadow: 0px 20px 50px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }.mask{ clip: rect(0px, 460px, 220px, 0px); border-radius: 4px; position: absolute; } img1{ width: 460px; }.h11{ margin: auto; text-align: left; margin-top: 240px; padding-left: 30px; font-family: 'Merriweather', serif; font-size: 24px; } p9{ text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; }.button56 { background-color: #3EDD84; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; margin-top: 15px; margin-left: 30px; margin-right: 70px; font-size: 12px; cursor: pointer; font-family: 'merriweather';
<section> <link rel="stylesheet" href="assets/css/blog.css"> <div class="container1"> <div class="square"> <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask"> <div class="h11">“Chances Of My Uni/College Admission?”</div> <p9>It is that time of the year again (yay:) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges.</p9> <div><a href="https://medium.com/@laheshk/is-apple-a-design-company-f5c83514e261" target="_" class="button56">Read More</a></div> </div> </div> </section>Ignore the image from the output above but as you can see, my text is not formatted properly and I tried everything I could to make it work, but I can't.
Expected Output:
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .container{ display: flex; justify-content: center; padding: 80px; }.square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }.square{ width: 460px; height: 430px; background: white; border-radius: 4px; box-shadow: 0px 20px 50px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }.mask{ clip: rect(0px, 460px, 220px, 0px); border-radius: 4px; position: absolute; } img{ width: 460px; }.h1{ margin: auto; text-align: left; margin-top: 240px; padding-left: 30px; font-family: 'Merriweather', serif; font-size: 24px; } p{ text-align: justify; padding-left: 30px; padding-right: 30px; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; }.button { background-color: #3EDD84; color: white; width: 90px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; margin-top: 20px; margin-left: 30px; margin-right: 70px; font-size: 12px; cursor: pointer; font-family: 'merriweather';
<html> <head> <title>Blog card</title> </head> <body> <div class="container"> <div class="square"> <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask"> <div class="h1">Is Apple a Design Company?</div> <p>Apple is more than a tech company; it became a culture unto itself, a passion of most of people and the birthplace of the world's most revolutionized products.</p> <div><a href="https://medium.com/@laheshk/is-apple-a-design-company-f5c83514e261" target="_" class="button">Read More</a></div> </div> </div>
Again ignore the image from the above output, but I want my text to be formatted like that. How would I do that?
2 answers
solution1
0 2021-01-07 01:00:31
look my friend, give your p not p9 class or make your style p directly with the style on the expected output.
p{
text-align: justify;
padding-left: 30px;
padding-right: 30px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
}
that's all
don't forget to change <p9> to <p>
solution2
0 ACCPTED 2021-01-07 01:23:10
Add a left and right padding of 30px to your .p9 class plus apply display: block to it to have the same padding as in the header above it. (BTW: You should also apply padding: right to the .h11 class, otherwise your text might go to far to the right if the text content, font-size or container width changes.
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .container1 { display: flex; justify-content: center; padding: 80px; }.square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }.square { width: 460px; height: 430px; background: white; border-radius: 4px; box-shadow: 0px 20px 50px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }.mask { clip: rect(0px, 460px, 220px, 0px); border-radius: 4px; position: absolute; } img1 { width: 460px; }.h11 { margin: auto; text-align: left; margin-top: 240px; padding-left: 30px; font-family: 'Merriweather', serif; font-size: 24px; } p9 { text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; padding-left: 30px; padding-right: 30px; display: block; }.button56 { background-color: #3EDD84; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; margin-top: 15px; margin-left: 30px; margin-right: 70px; font-size: 12px; cursor: pointer; font-family: 'merriweather'; }
<section> <link rel="stylesheet" href="assets/css/blog.css"> <div class="container1"> <div class="square"> <img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask"> <div class="h11">“Chances Of My Uni/College Admission?”</div> <p9>It is that time of the year again (yay:) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges.</p9> <div><a href="https://medium.com/@laheshk/is-apple-a-design-company-f5c83514e261" target="_" class="button56">Read More</a></div> </div> </div> </section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML5 - Chrome 44 - text in flexbox not aligning properly
Aligning text vertically from top to bottom HTML5 CSS3
Items not aligning properly in CSS container
Aligning Text in CSS/JS menu
Aligning a text relative to the html canvas
how to fix CSS div's not aligning properly
CSS- Injecting and aligning images above certain words in (any) html text without ruining the text flow
aligning image side by side position (css + html)
Having trouble aligning HTML and CSS elements
Html css aligning on the right side of image
Related Tags