文本对齐困难 HTML

Question

页面上的文字除了 Troll Malayalam 标题外，所有其他文字都与屏幕中间对齐，谁能告诉我原因

我的代码如下

一些 css 也与我 friend.I 编写的文件相关联，不知道这是否是问题所在。（这是为了使 Troll Malayalam 文本在开始时位于紫色图标的中间，并对 div 和图像进行一些调整）。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>

Answer 1

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



p {text-align:left}

Answer 2

如果问题是文本居中对齐，那么就可以了。

我已经从您的代码中删除了 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>

Answer 3

Disclaimer : This post is not in favor of trolling and you too are advised not to troll

到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>

如果您想在顶部添加 Troll Malayalam 和 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>

Answer 4

You should change your layout,

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>

文本对齐困难 HTML

Difficulty in Text Alignment HTML

html

css

text-alignment