How do I fix my border to wrap around my text in the center?-CodePudding

My border keeps stretching whenever I center the text in the middle. I want the border to be just around the text not around the whole middle area.

Here is my code:

#EnterHouse {
  text-align: center;
  font-weight: bold;
  font-size: x-large;
  position: fixed;
  bottom: 0;
  margin-bottom: 25px;
  overflow: hidden;
  border: 10px solid black;
  background-color: black;
  display: inline-block;
}

#EnterHouse {
  float: left;
  width: 100%;
}

#EnterHouse a {
  text-decoration: none;
  color: orange;
}

#EnterHouse a:hover {
  color: red;

<body>
  <div id="IKWYDLH">Example</div>
  <div id="EnterHouse"><a href="Index.html">Hello World</div></a>
</body>

CodePudding user response：

You can nest the text in a span. Remove the border from #EnterHouse and use padding to give it some extra height. Then just set the border on the span element.

#EnterHouse {
  text-align: center;
  font-weight: bold;
  font-size: x-large;
  position: fixed;
  bottom: 0;
  margin-bottom: 25px;
  overflow: hidden;
  padding: 10px;
  background-color: black;
  display: inline-block;
}

#EnterHouse {
  float: left;
  width: 100%;
}

#EnterHouse a {
  text-decoration: none;
  color: orange;
}

#EnterHouse a:hover {
  color: red;
}

span {
  border: 1px solid red;
}

<body>
  <div id="IKWYDLH">Example</div>
  <div id="EnterHouse"><a href="Index.html"><span>Hello World</span></a></div>
</body>

CodePudding user response：

Only use floats and absolutes if you really have to. For this, change the display to table and add margin: 0 auto

#EnterHouse {
  text-align: center;
  font-weight: bold;
  font-size: x-large;
  margin-bottom: 25px;
  overflow: hidden;
  border: 10px solid black;
  background-color: black;
  display: table;
  margin: 0 auto;
}

#EnterHouse a {
  text-decoration: none;
  color: orange;
}

#EnterHouse a:hover {
  color: red;

<body>
  <div id="IKWYDLH">Example</div>
  <div id="EnterHouse"><a href="Index.html">Hello World</a></div>
</body>

CodePudding user response：

  #EnterHouse {
        text-align: center;
        font-weight: bold;
        font-size: x-large;
        position: fixed;
        bottom: 0;
        margin-bottom: 25px;
        overflow: hidden;   
        background-color: black;
        display: inline-block;
    }
#EnterHouse {
float: left;
width: 100%;
  padding:1pc;
  
}
    #EnterHouse a {
        text-decoration: none;
        color: orange;
              border: 10px solid yellow;

    
    }
    #EnterHouse a:hover {
        color: red;
      
}