将 div 与其他 div 对齐

Question

I'm trying to replicate something like this: .

The red div (the container) is centered horizontaly and hasn't a fixed width. The "title" div inside it should set the width of the container by being the widest div inside it, and the "welcome to" and "subtitle" divs are attached to the "title" div and the left/right of the container.

I'm struggling to understand how I can put my "welcome to" div to the left, before having set the "title" div which gives the width of the container.

For the moment, I have this code:

.container {
text-align: center;
}

.welcome_to{
text-align: left;
}

.subtitle{
text-align:right;
}

.title{
}

It centers the title div, but put the other divs at the edges of the screen, and not of the container.

Answer 1

This should give you a start

 .container { border: 3px solid red; display: flex; flex-direction: column; font-size: 2em; }.left, .center, .right { border: 3px solid blue; }.full-width { width: 100%; }.left { display: flex; align-self: flex-start; }.center { display: flex; align-self: center; justify-content: center; }.right { display: flex; align-self: flex-end; }

 <div class="container"> <div class="left">Left</div> <div class="center full-width">Center and full width</div> <div class="right">right</div> </div>

Answer 2

text-align aligns text, not block elements. The best way here is to use flexbox:

 /* This is the actual code */.container { display: flex; flex-direction: column; }.welcome-to { align-self: flex-start; width: 50%; }.title { text-align: center; }.subtitle { align-self: flex-end; width: 50%; text-align: right; } /* Decoration only */.container { border: 3px solid red; }.container > * { box-sizing: border-box; padding: 1rem; border: 3px solid blue; }

 <div class="container"> <div class="welcome-to">Welcome to</div> <div class="title">Title</div> <div class="subtitle">Subtitle</div> </div>