?
Solved

How to center-justify a multi-line text block that is centered in div using flex?

Posted on 2016-11-18
5
Medium Priority
?
86 Views
Last Modified: 2016-11-23
I'm new to flex. Here is what I'm trying to use so far?

.communityPromo{
  width:100%;
  max-width: none !important;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;    // center text block
  align-content:center;

This centers the text block in the div, but the text block remains left-justified.
}
0
Comment
Question by:dlearman1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41894116
Can you show us more of your code - the style is not enough to replicate the problem.
0
 

Author Comment

by:dlearman1
ID: 41894326
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41894548
Add text-align: center to the <p>
communityPromo  > p{
  max-width:50rem;
  text-align: center;
}

Open in new window

justify-content is about how to arrange space around the child elements.
0
 

Author Closing Comment

by:dlearman1
ID: 41899684
Thanks Julian... that worked great
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41899728
You are welcome.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month7 days, 19 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question