Centrowanie wewnętrznego elementu względem zewnętrznego wyrównania do prawej (trochę skomplikowane)

0

Dzień dobry.

Mam taki problem. Chciałbym uzyskać taki efekt:
screenshot-20211015080932.png

Czyli. Mam element blokowy, w którym mam wyjustowany tekst. Pod tekstem chcę mieć kolejny, zagnieżdżony element, w którym chcę mieć 2 linie tekstu:

Powodzenia!
Imię Nazwisko

które będą wyśrodkowane, ale tylko lokalnie tj. będą wyrównane do prawej z paddingiem, ale poza tym, chcę żeby tekst był wyśrodkowany jak na rysunku. Da się to osiągnąć? Teraz zrobiłem to tak:

<span class="board-title welcome">
    <span class="start-regard">Witaj!<br><br></span>
    Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
    Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
    Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
    <span class="end-regard"><span class="inside-end-regard">Powodzenia!<br></span>
    Paweł Zenubiusz</span>
</span>
.board-title {
    display: block;
    width: 100%;
    border: 1px solid;
    border-radius: 10px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.welcome {
    padding: 10px;
    text-align: justify;
}

.start-regard {
    display: block;
    text-align: center;
}

.end-regard {
    display: block;
    text-align: right;
    padding-right: 100px;
}

.inside-end-regard {
    display: block;
    padding-right: 20px;
}

Czyli wyrównuję podpis do prawej, daję padding-right: 100px; a dodatkowo pierwszą linijkę daję padding-right: 20px;.

Czy da się to zrobić przejrzyściej? Bez zabawy z paddingami?

Dzięki ;)

1

Można zrobić coś takiego za pomocą grida. Co prawda padding-right: 100px; i padding-right: 20px; zniknął, ale pojawiła się pusta kolumna na 100px, więc nie do końca można się tego pozbyć, bo zawsze w jakiś sposób trzeba ustalić ten odstęp.

<div class="board-title">
    <div class="board-body">
      <span class="start-regard">Witaj!</span>
      <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
      <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
      <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
  </div>
  <div class="board-footer">
    <span class="inside-end-regard">Powodzenia!</span>
    Paweł Zenubiusz
  </div>
</div>
.board-title {
    display: grid;
    grid-template-columns: 1fr auto 50px;
    grid-template-areas: 
      "body body    body"
      ".    footer  .";
    grid-gap: 10px 0;
    border: 1px solid;
    border-radius: 10px;
    padding: 10px;
}

.board-body {
  grid-area: body;
  width: 100%;
  text-align: justify;
}

.board-footer {
  grid-area: footer;
  text-align: center;
}

.start-regard {
    display: block;
    text-align: center;
}

.inside-end-regard {
    display: block;
}

I jak odpalimy sobie devtoolsy w Chrome to ładnie nam pokazuje jakie są kolumny.

Przechwytywanie.JPG

0

Bardzo dziękuję @Xarviel , Twoje rozwiązanie naprowadziło mnie na własne! Ale ze mnie guła :D Przecież piszę stronę z Bootstrapem! :)

<span class="board-title welcome">
    <div class="container px-0">
        <div class="row">
            <div class="col-12 d-flex justify-content-center">
                Witaj!<br><br>
            </div>
        </div>
    </div>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    Bla bla bla bla bla bla bla bla bla bla bla<br>
    <br><br>
    <div class="container px-0">
        <div class="row">
            <div class="col-7"></div>
            <div class="col-5 pt-3 d-flex justify-content-center">
                Powodzenia!<br>
            </div>
        </div>
        <div class="row">
            <div class="col-7"></div>
            <div class="col-5 d-flex justify-content-center">
                Zenek
            </div>
        </div>
    </div>

Grid! Tak! Dzięki! :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1