CODEWITHSUNDEEP
htmlcss
JOKKER
JOKKER

Reputation: 542

Center align an element that is 100% width

I need some help aligning an element.

Here's the layout I'm working with:

.container {
  display: block;
  box-sizing: border-box;
}

.heading {
  margin-bottom: 10px;
}

.file-input {
  display: block;
  border: 2px dashed #ddd;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}
<div class="container">
    <h4 class="heading">7. Attachments</h4>
    <input type="file" class="file-input">
</div>

Is it at all possible to somehow center align the Choose File button along with the text inside the border without changing the HTML code?

I can not change the HTML code. I can only work with what I have..

EDIT: I just wanted to add that I want to maintain the border at width: 100%.

Upvotes: 0

Views: 44

Answers (2)

Ali Hamza Yaseen
Ali Hamza Yaseen

Reputation: 140

<div class="container">
   <h4 class="heading">7. Attachments</h4>
   <div class="inputwrap">
      <input type="file" class="file-input">
   </div>
</div>

   .file-input {
    width: 30%;
    margin: 0 auto;
    border: 0;
   }
   .inputwrap {
    width: 100%;
    padding: 30px;
    border: 2px dashed #ddd;
   }

Upvotes: 0

DCR
DCR

Reputation: 15700

This is as close as I can get. You might be able to do this with grid

.container {
  display: flex;
  justify-content:center;
  box-sizing: border-box;
  flex-wrap:wrap;
}

.heading {
  margin-bottom: 10px;
  width:100%;
}

.file-input {
 
  border: 2px dashed #ddd;
  padding: 10px;
  padding-left:35%;
  padding-right:35%;
  width: 30%;
  cursor: pointer;
}
<div class="container">
    <h4 class="heading">7. Attachments</h4>
    <input type="file" class="file-input">
</div>

Upvotes: 1

Related Questions