Как сместить элемент?

Question

[Keith Griffon]

Мне нужно что-бы аватарки были строго по центру. Как это сделать? Код ниже.

<div class="msgContainer">
        <div class="leftS">
            <?php 
    			echo '<img class="avatar2" src="data:image/png;base64,'.$bg[2].'"/>';  
    			 ?>
        </div>

.avatar2 {
     width: 90px;
     height: 90px;
}

.msgContainer {
     display: block;
     align-items: center;
     position: relative;
     width: 900px;
     height: 600px;
     background: #424242;
     border-radius: 50px;
     left: 50%;
}

.leftS {
     width: 200px;
     height: 600px;
     background: rgba(255, 255, 255, 0.1);
     overflow-y: scroll;
     border-radius: 50px 0px 0px 50px;
}

.leftS * {
     position: relative;
     left: 30px;
}

Answer 1

[Mizutsune]

Если нужно сделать по центру(вертикально и горизонтально):

.leftS{
    display: flex;
    justify-content: center;
    align-items: center;
}

Или если только по горизонтали:

.leftS{
    display: flex;
    justify-content: center;
}

И в любом случае можно убрать это:

.leftS * {
    position: relative;
    left: 30px;
}

Таким образом аватарка встанет по центру.

Дополнительная информация

Замените двоеточие, на точку с запятой в своём CSS коде.

.msgContainer {
- position: relative:
+ position: relative;
}

Ну, а ещё почитайте про форматирование кода и получше изучите CSS.

Comments

[Keith Griffon]

спасибо что заметили с позицией, но он идет на самую середину а сам
а само у меня оно так

[Keith Griffon]

благодарю вас