text-align/align-content не работает

Я пытался и пытался заставить это работать. Но независимо от того, что я пытаюсь, я не могу заставить это проявиться в центре.text-align/align-content не работает

Я искал stackoverflow. Я попробовал margin: 0 auto; и попытался удалить плавающие элементы. Но ничего не работает.

Должно быть, я пропустил что-то простое. Я не очень хорошо разбираюсь в CSS. Не могли бы вы указать на это?

body { 
 
    align-content: center; 
 
    text-align: center; 
 
    background-image: url(images/marble.gif); 
 
    margin: 0 auto; 
 
} 
 
#about { 
 
    align-content: center; 
 
    text-align: center; 
 
    width: 700px; 
 
} 
 
#about img { 
 
    align-content: center; 
 
    text-align: center; 
 
    border-right: black thick solid; 
 
    border-top: black thick solid; 
 
    border-left: black thick solid; 
 
    border-bottom: black thick solid; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    padding-bottom: 0px; 
 
    margin: 3px; 
 
    padding-top: 0px; 
 
} 
 
#myPicture p { 
 
    align-content: center; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 11pt; 
 
} 
 
#myName p { 
 
    align-content: center; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 24pt; 
 
    clear: both; 
 
    margin-top: 15px; 
 
}

<div id="about"> 
 
    <div id="myPicture"> 
 
    <p>&nbsp;</p> 
 
    <p> 
 
     <img src="images/profile2.jpg" /> 
 
    </p> 
 
    </div> 
 

 
    <div id="myName"> 
 
    <p>Dude</p> 
 
    </div> 
 

 
    <div id="myTitles"> 
 
    <div class="myTitleClass"> 
 
     <p>... 
 
    </div> 
 
    </div>

источник

2015-08-12 user2487896

Для меня это полностью в центре в фрагменте кода, даже здесь, в скрипку https://jsfiddle.net/nk8Lch8t/ столь высоких шансов , некоторые другие свойства css над написанием центра css, – Shehary

Что вы просматриваете? Это может быть проблема с браузером/устройством, если вы не видите его в центре. –

Фрагмент находится в центре текста и изображения. Кроме того, 'align-content: center' не работает таким образом и может быть удален. [Используется с 'display: flex'] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) – misterManSam

Вы центрировали изображение и текст внутри div#about, который имеет ширину 700 пикселей, но сам div#about не центрирован. Я добавил background-color: orange; в DIV, так что вы можете увидеть, что происходит здесь:

Все, что вам нужно сделать, это добавить margin: 0 auto; к div#about, и вы получите это:

Сейчас это сосредоточено. Вы можете избавиться от оранжевого фона. Также я укорачивать CSS, проверить это:

body { 
 
    margin: 0; 
 
} 
 
#about { 
 
    width: 700px; 
 
    background-color: orange; 
 
    margin: 0 auto; 
 
} 
 
#about img { 
 
    border: black thick solid; 
 
    padding: 0; 
 
    margin: 3px; 
 
} 
 
#myPicture p { 
 
    text-align: center; 
 
} 
 
#myName p { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 24pt; 
 
    margin-top: 15px; 
 
}

<div id="about"> 
 
    
 
    <div id="myPicture"> 
 
    <p>&nbsp;</p> 
 
    <p> 
 
     <img src="images/profile2.jpg" /> 
 
    </p> 
 
    </div> 
 

 
    <div id="myName"> 
 
    <p>Dude</p> 
 
    </div> 
 

 
</div>

источник

2015-08-12 04:38:31 Cheslab

Ничего себе, ты лучший! Огромное спасибо. – user2487896

добавить запас налево: авто и запас-направо: авто к вашему о разделе

Вот fiddle

body { 
 
    width: 100%; 
 
    text-align: center; 
 
    background-image: url(images/marble.gif); 
 
    margin: 0 auto; 
 
} 
 
#about { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
    width: 700px; 
 
} 
 
#about img { 
 
    text-align: center; 
 
    border-right: black thick solid; 
 
    border-top: black thick solid; 
 
    border-left: black thick solid; 
 
    border-bottom: black thick solid; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    padding-bottom: 0px; 
 
    margin: 3px; 
 
    padding-top: 0px; 
 
} 
 
#myPicture p { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 11pt; 
 
} 
 
#myName p { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 24pt; 
 
    clear: both; 
 
    margin-top: 15px; 
 
}

<body> 
 
    <div id="about"> 
 
    <div id="myPicture"> 
 
     <p>&nbsp;</p> 
 
     <p> 
 
     <img src="images/profile2.jpg" /> 
 
     </p> 
 
    </div> 
 

 
    <div id="myName"> 
 
     <p>Dude</p> 
 
    </div> 
 

 
    <div id="myTitles"> 
 
     <div class="myTitleClass"> 
 
     <p>... 
 
     </div> 
 
    </div> 
 
</body>

источник

2015-08-12 03:26:11

@ user2487896 у вас достаточно репутации для продвижения - используйте его. вы должны перенести все свои ответы. –

ответ

Смежные вопросы