Блог

Я хотел бы взять элемент блока и расположить его рядом с правой границей родительского элемента, при этом текст внутри элемента центрирован. Как мне сделать это с помощью CSS?

     <div class="A">
      some text - some text - some text - some text - some text - 
        <div class="B">
          some text
        <br/>
          some more text
        </div>
      some text - some text - some text - some text - some text
   </div>
 

Текст внутри div class=»A» должен быть выровнен по левому краю или выровнен по ширине, в то время как элемент div class =»B» должен быть расположен справа с отступом, скажем, 30 пикселей, а строки текста внутри центрированы.

Заранее спасибо!

Вы должны опубликовать то, что вы пробовали.

В любом случае, вот способ сделать это с помощью flexbox

 .B {
  color: red;
  margin-left: auto;
  text-align: center;
  margin-right:30px;
}
.A {
   display:flex;
   flex-wrap:wrap;
   flex-direction: column;
   border:1px solid black;
} 

   <div class="A">
    some text - some text - some text - some text - some text -
    <div class="B">
      some text
      <br />
      some more text
    </div>
    some text - some text - some text - some text - some text
  </div> 

Если вы хотите расположить элемент относительно его родительского элемента, вы должны использовать абсолютную позицию дочернего элемента и расположить его с помощью top, bottom, right и left:

 .A{
      width: 100px;
      height: 200px;
}
.B{
      position: absolute;
      right: 0;
      width: 50px;
      height: 5px;
}
 

А для выравнивания текста внутри элемента вы должны использовать text-align:

 text-align: center;
text-align: left;
text-align: right;
text-align: justify;