文本对齐 HTML 的困难答案

【问题标题】：Difficulty in Text Alignment HTML文本对齐 HTML 的困难
【发布时间】：2021-11-12 19:35:11
【问题描述】：

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

我的代码如下

一些 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>

【问题讨论】：

马来文？所以你想把整个文本放在中间还是左边？你认为它会是怎样的>
是的，兄弟，我希望文本左对齐
我已经添加了一个答案。检查一下，如果您需要进一步的帮助，请告诉我。
任何时候，希望能看到这个网站，并得到一笑。万事如意
@AbinThaha 当然 :)，谢谢你

标签： html css text-alignment

【解决方案1】：

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

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

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



p {text-align:left}

【讨论】：

简要解释代码的工作原理将大大改善答案

【解决方案3】：

免责声明：本帖不支持拖钓，建议您不要拖钓

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

【讨论】：

【解决方案4】：

你应该改变你的布局，

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>

【讨论】：