Текст на странице За исключением заголовка Тролль малаялам , весь остальной текст выравнивается по центру экрана. Кто-нибудь может сказать мне причину этого

enter image description here

Мой код приведен ниже

Некоторые css также были связаны с файлом, который был написан моим другом. Я не знаю, создает ли это проблема. (Это было написано так, чтобы текст Troll Malayalam был в середине фиолетовый значок при запуске и некоторые настройки изображения div amd). Этот css приведен ниже

img {
  outline: none;
}
p {
  display: inline-block;
  float: left;
  line-height: 50px;
  padding-left: 5px;
}
.main {
  outline: none;
  background: white;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  height: auto;
  border: 5px solid gray;
  margin: 0;
}
.footer_cnt img {
  margin: 0px;
  padding: 0;
  height: 50px;
  float: left;
}
.footer_cnt a {
  color: #000000;
  float: left;
  margin: 0px 20px;
}
.footer_cnt span {
  margin-bottom: 5px;
}

.text {
  display: inline-block;
  float: left;
  line-height: 50px;
  padding-left: 5px;
}
<div class="main">
  <div class="footer">
    <div class="footer_cnt">
      <img
        src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-1/p720x720/84111402_2811061845582960_154567974538182656_n.jpg?_nc_cat=1&ccb=1-5&_nc_sid=dbb9e7&_nc_ohc=ihulZ5OK3PIAX-l1LDw&_nc_ht=scontent.fcok1-1.fna&oh=b79534f76c601b8021f624031fa8c734&oe=616CA9AB"
        height="50"
        width="50"
        style="border: 0px solid #cacaca; display: inline-block"
      /><span class="text">&nbsp Troll Malayalam</span>
    </div>
  </div>
  <p align="left">
    SED ആക്കിയല്ലോ <br />
    © A k H i L (Troll Malayalam)
  </p>
  <br />
  <img
    style="width: 100%; height: auto"
    src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-9/p526x296/242233471_4487946741227787_7604896157043718753_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=110474&_nc_ohc=A7fWT3N-pTsAX9W9Ub0&_nc_ht=scontent.fcok1-1.fna&oh=0d61346f219d8997e50e7e54fcfaae0f&oe=616BB3D7"
  />
</div>
2
SimpleGuy_ 18 Сен 2021 в 07:36

4 ответа

Лучший ответ

Если проблема заключалась в том, что текст выровнен по центру, то готово.

Я удалил float: left из вашего кода (4 места). И теперь мне кажется, что это имеет смысл. Проверьте сейчас, если вы хотите, чтобы текст был выровнен по центру, теперь вы также можете передать свойство text-align, чтобы сделать это.

img {
  outline: none;
}
p {
  display: inline-block;
  line-height: 50px;
  padding-left: 5px;
}
.main {
  outline: none;
  background: white;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  height: auto;
  border: 5px solid gray;
  margin: 0;
}
.footer_cnt img {
  margin: 0px;
  padding: 0;
  height: 50px;
}
.footer_cnt a {
  color: #000000;
  margin: 0px 20px;
}
.footer_cnt span {
  margin-bottom: 5px;
}

.text {
  display: inline-block;
  line-height: 50px;
  padding-left: 5px;
}
<div class="main">
  <div class="footer">
    <div class="footer_cnt">
      <img
        src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-1/p720x720/84111402_2811061845582960_154567974538182656_n.jpg?_nc_cat=1&ccb=1-5&_nc_sid=dbb9e7&_nc_ohc=ihulZ5OK3PIAX-l1LDw&_nc_ht=scontent.fcok1-1.fna&oh=b79534f76c601b8021f624031fa8c734&oe=616CA9AB"
        height="50"
        width="50"
        style="border: 0px solid #cacaca; display: inline-block"
      /><span class="text">&nbsp Troll Malayalam</span>
    </div>
  </div>
  <p align="left">
    SED ആക്കിയല്ലോ <br />
    © A k H i L (Troll Malayalam)
  </p>
  <br />
  <img
    style="width: 100%; height: auto"
    src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-9/p526x296/242233471_4487946741227787_7604896157043718753_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=110474&_nc_ohc=A7fWT3N-pTsAX9W9Ub0&_nc_ht=scontent.fcok1-1.fna&oh=0d61346f219d8997e50e7e54fcfaae0f&oe=616BB3D7"
  />
</div>
2
Abin Thaha 18 Сен 2021 в 04:51
<p >SED ആക്കിയല്ലോ  <br> © A k H i L(Troll Malayalam)</p> 
<br>



p {text-align:left}
0
bibin antony 18 Сен 2021 в 04:50

Отказ от ответственности: этот пост не в пользу троллинга, и вам тоже не рекомендуется троллить.

Чтобы center-align SED ആക്കിയല്ലോ <br />© A k H i L (Troll Malayalam) просто измените:

<p align="left">
    SED ആക്കിയല്ലോ <br />
    © A k H i L (Troll Malayalam)
  </p>

в

<p align="center">
    SED ആക്കിയല്ലോ <br />
    © A k H i L (Troll Malayalam)
  </p>

Если вы хотите добавить тролль малаялам вверху и background-color: yellow
Затем добавьте это в свой код:
HTML

<div class="contentContainer">
<h2 class="contentHead">Troll Malyalam</h2>
<!--Your initialhtml code goes here-->
</div>   

CSS

*{
  box-sizing:border-box
}
.contentContainer{
  background-color:yellow;
  padding:10px;
}
.contentHead{
  text-align:center;
}
img {
  outline: none;
}
p {
  display: inline-block;
  float: left;
  line-height: 50px;
  padding-left: 5px;
}
.main {
  outline: none;
  background: white;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  height: auto;
  border: 5px solid gray;
  margin: 0;
}
.footer_cnt img {
  margin: 0px;
  padding: 0;
  height: 50px;
  float: left;
}
.footer_cnt a {
  color: #000000;
  float: left;
  margin: 0px 20px;
}
.footer_cnt span {
  margin-bottom: 5px;
}

.text {
  display: inline-block;
  float: left;
  line-height: 50px;
  padding-left: 5px;
}
<div class="main">
  <div class="footer">
    <div class="footer_cnt">
      <img
        src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-1/p720x720/84111402_2811061845582960_154567974538182656_n.jpg?_nc_cat=1&ccb=1-5&_nc_sid=dbb9e7&_nc_ohc=ihulZ5OK3PIAX-l1LDw&_nc_ht=scontent.fcok1-1.fna&oh=b79534f76c601b8021f624031fa8c734&oe=616CA9AB"
        height="50"
        width="50"
        style="border: 0px solid #cacaca; display: inline-block"
      /><span class="text">&nbsp Troll Malayalam</span>
    </div>
  </div>
  <p align="center">
    SED ആക്കിയല്ലോ <br />
    © A k H i L (Troll Malayalam)
  </p>
  <br />
  <img
    style="width: 100%; height: auto"
    src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-9/p526x296/242233471_4487946741227787_7604896157043718753_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=110474&_nc_ohc=A7fWT3N-pTsAX9W9Ub0&_nc_ht=scontent.fcok1-1.fna&oh=0d61346f219d8997e50e7e54fcfaae0f&oe=616BB3D7"
  />
</div>
0
Rana 18 Сен 2021 в 05:07

Вы должны изменить свой макет,

img {
  outline: none;
}

p {
  display: inline-block;
  float: left;
  line-height: 20px;
  margin: 0 0 25px 0;
}

.main {
  outline: none;
  background: white;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  height: auto;
  border: 5px solid gray;
  margin: 0;
}

.footer_cnt img {
  margin: 0px;
  padding: 0;
  height: 50px;
  float: left;
}

.footer_cnt a {
  color: #000000;
  float: left;
  margin: 0px 20px;
}

.footer_cnt span {
  margin-bottom: 5px;
}

.text {
  float: left;
  line-height: 27px;
  padding-left: 5px;
}
<div class="main">
  <div class="footer">
    <div class="footer_cnt">
      <img
        src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-1/p720x720/84111402_2811061845582960_154567974538182656_n.jpg?_nc_cat=1&ccb=1-5&_nc_sid=dbb9e7&_nc_ohc=ihulZ5OK3PIAX-l1LDw&_nc_ht=scontent.fcok1-1.fna&oh=b79534f76c601b8021f624031fa8c734&oe=616CA9AB"
        height="50"
        width="50"
        style="border: 0px solid #cacaca; display: inline-block"
      /><div class="text">
      <div>Troll Malayalam</div>
      <div> SED ആക്കിയല്  ോ </div>
      <p>
    © A k H i L (Troll Malayalam)
  </p>
      </div>
       
    </div>
  </div>
 
  <br />
  <img
    style="width: 100%; height: auto"
    src="https://scontent.fcok1-1.fna.fbcdn.net/v/t1.6435-9/p526x296/242233471_4487946741227787_7604896157043718753_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=110474&_nc_ohc=A7fWT3N-pTsAX9W9Ub0&_nc_ht=scontent.fcok1-1.fna&oh=0d61346f219d8997e50e7e54fcfaae0f&oe=616BB3D7"
  />
</div>
0
Hossein Azizdokht 18 Сен 2021 в 05:14