Difficulty in Text Alignment HTML

Question

The Text on page Except that Troll Malayalam Heading , all other text aligns to the middle of screen,Can anyone tell me the reason for it

My Code is given below

Some css were also associated with the file which was written by my friend.I don't know whether this's making the problem.(This was written so as to make the Troll Malayalam text to be in middle of the violet icon at starting and for some adjustments to div amd image).That css is given below

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>

Malayali ? So you are trying to make the whole texts into the center or to the left ? How do you expect it to be > — Abin Thaha, Sep 18 '21 at 04:48
I have added an answer. Check it and let me know in case if you need further assistance. — Abin Thaha, Sep 18 '21 at 05:26
Anytime, hoping to see this website around, and get laughed. All the best — Abin Thaha, Sep 18 '21 at 05:45

score 2 · Accepted Answer · answered Sep 18 '21 at 04:51

If the problem was the text's are aligned in the center, then here you go.

I have removed the float: left from your code (4 places). And now it seems to be making sense to me. Check now, if you want the texts to be aligned to the center, you can now give text-align property to do so also.

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>

score 0 · Answer 2 · answered Sep 18 '21 at 04:50

0

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



p {text-align:left}

answered Sep 18 '21 at 04:50

bibin antony

293
1
5

Brief explanation of how the code works will greatly improve the answer – TheMaster Sep 18 '21 at 13:05

Rana · Answer 3 · 2021-09-18T05:07:03.657

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

To center-align SED ആക്കിയല്ലോ <br />© A k H i L (Troll Malayalam) just change :

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

to

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

If you want to add Troll Malayalam at top and background-color: yellow
Then add this to your code :
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>

score 0 · Answer 4 · answered Sep 18 '21 at 05:14

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>

Difficulty in Text Alignment HTML

4 Answers4