'how to center content with out making the width or height smaller

how to center content + making it the same shape without the width or height be smaller in this code ? , note the code is not full because stack over flow gived me a limt

.searchbox {
    margin-top: 20px;
    background-color: #2b2a38;
    padding: 15px 27px;
    font-size: 20px;
    color: #ccc;
    border: 3px solid #2b2a38;
    border-radius: 8px;
    width: 40%;
}

  .content {
    padding: 0 18px;
    width: 50%;
    margin-left: 25%;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #2f3136;
    color: #6a707a;
    text-align: left;
    display: none;
  }

<input id="myInput" type="text" class="searchbox" placeholder="Search">

            <div class="content">
                <h4 style="color: rgb(169, 247, 247);">Category:</h4>
                <p style="color: rgb(242, 44, 232);">Premium</p>
                <h4 style="color: #cccccc;">Usage:</h4>
                <p>Hrr</p>
                <h4 style="color: #cccccc;">Examples:</h4>
                <p>Hrr {messageID} {roleID} {emojiID}</p>
            </div>
        </div>


.searchbox {
  margin-top: 20px;
  background-color: #2b2a38;
  padding: 15px 27px;
  font-size: 20px;
  color: #ccc;
  border: 3px solid #2b2a38;
  border-radius: 8px;
  width: 40%;
}

.content {
  padding: 0 18px;
  width: 50%;
  margin-left: 25%;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #2f3136;
  color: #6a707a;
  text-align: left;
  display: none;
}
<input id="myInput" type="text" class="searchbox" placeholder="Search">

<div class="content">
  <h4 style="color: rgb(169, 247, 247);">Category:</h4>
  <p style="color: rgb(242, 44, 232);">Premium</p>
  <h4 style="color: #cccccc;">Usage:</h4>
  <p>Hrr</p>
  <h4 style="color: #cccccc;">Examples:</h4>
  <p>Hrr {messageID} {roleID} {emojiID}</p>
</div>
</div>
htmlcss


Solution 1:[1]

hey in this case you can use this

.content{

width: 100%;
display: block;
margin: auto;

}

you can adjust your width or keep it the same

Solution 2:[2]

You can center box content easily

.searchbox {
   display: flex;
   justify-content: center;
   // align-items: center; //when you want vertical center
}

Solution 3:[3]

Size it with a relative unit (I used 20em) and use flex to center it.

  • Stacked the elements flex-direction: column;
  • Set the alignment on the content box: align-self: center;
  • Set width relative to the parent font width: 20em;
  • Removed the display:none; to show it
  • Adjusted the colors using classes not embedded style attributes
  • Added a "container" so I could use flex on it and stack the elements
  • Fixed the malformed HTML

.container {
  display: flex;
  flex-direction: column;
}

.searchbox {
  margin-top: 20px;
  background-color: #2b2a38;
  padding: 15px 27px;
  font-size: 20px;
  color: #ccc;
  border: 3px solid #2b2a38;
  border-radius: 8px;
  width: 40%;
}

.content {
  align-self: center;
  padding: 0 18px;
  width: 20em;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #2f3136;
  color: #FFFFAC;
  text-align: left;
}

.category {
  color: rgb(169, 247, 247);
}

.premium {
  color: rgb(242, 44, 232);
}

.label-me {
  color: #eeeeee;
}
<div class="container">
  <input id="myInput" type="text" class="searchbox" placeholder="Search">

  <div class="content">
    <h4 class="category">Category:</h4>
    <p class="premium">Premium</p>
    <h4 class="label-me">Usage:</h4>
    <p>Hrr</p>
    <h4 class="label-me">Examples:</h4>
    <p>Hrr {messageID} {roleID} {emojiID}</p>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maaraoui Yassine
Solution 2 Nicholi Jin
Solution 3 Mark Schultheiss

Related Questions