Question 42457 in Html Question posted in
Some basic documentation can be found here.

How to align and center two divs horizontally and also to make them responsive? – Html

I should do it like on this picture. The two fields should be horizontally aligned and flexible. I think that these fields should be two divs in one mother div?

.parentField {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  border: 1px solid black;
  width: 50%;
}

.field1 {
  margin: 10px;
  border: 1px solid red;
}

.field2 {
  margin: 10px;
  border: 1px solid red;
}

.browse {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  margin-bottom: -500%;
  margin-left: 80%;
  margin-top: -500%;
}

.text {
  text-align: center;
  margin: 0 auto;
  padding-top: 14px;
  font-size: small;
  padding-right: 80px;
}

.or {
  text-align: center;
  margin-top: -30px;
}

.text1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 14px;
  font-size: small;
  padding-right: 80px;
}

.browse1 {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  margin-bottom: 60px;
}
<div class="parentField">
  <div class="field1">
    <p class="text">Upload a Power Point presentation .pptx .pptm .ppt</p>
    <button class="browse">Browse</button>
  </div>
  <p class="or">or</p>
  <div class="field2">
    <p class="text1">Upload a Word document .doc .docm .docx</p>
    <button class="browse1">Browse</button>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You can use flexbox for this one.

    .container {
  display: flex;
  justify-content: space-around;
  padding: 10px 10px;
}

.separator {
  text-align: center;
  padding-inline-end: 5px;
  padding-inline-start: 5px;
}

.file-upload{
  padding-inline-end: 5px;
  padding-inline-start: 5px;
}

.form-control {
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
  line-height: 1.44444444;
  border-radius: 3px;
}
    <div class="container">
  <div class="file-upload">
    <input type="text" class="form-control" placeholder="first element..." />
  </div>
  <div class="separator">
    <p>or</p>
  </div>
  <div class="file-upload">
    <input type="text" class="form-control" placeholder="second element..." />
  </div>
</div>

    You can play with justify-content property to find your desired outcome. Also note that justify-content changes element position on the "main" axis. With the property flex-direction which default value is row, you can determine the main axis. So here the main axis is x, and in order to change the elements’ position vertically, you should set the align-items property.

    The best reference for flexbox I’ve found is here: A Complete Guide to Flexbox

    Login or Signup to reply.
  2. 0 
    .parentField {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid red;
  padding: 5px 10px;
  border-radius: 10px;
}

.browse {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  margin-left: 50px;
}

.text {
  font-size: small;
}
    <div class="parentField">
      <div class="field">
        <p class="text">Upload a Power Point presentation .pptx .pptm .ppt</p>
        <button class="browse">Browse</button>
      </div>
      <p class="or">or</p>
      <div class="field">
        <p class="text">Upload a Word document .doc .docm .docx</p>
        <button class="browse">Browse</button>
      </div>
    </div>
    Login or Signup to reply.
  3. 0

    You can use Flexbox in order to achieve your desired output. You can refer to my CSS to achieve the same as shown in Screen Shot you shared.
    Also, You cannot directly style <input type="file", so instead you can hide it and use the custom button to achieve the same. But to use the custom button you’ll need to add the JavaScript function as I have used the below code which points to <input type="file" on the click custom button.

    document.getElementById('buttonid').addEventListener('click', openDialog);

function openDialog() {
  document.getElementById('fileid').click();
}
    .parentField {
    width: 80%;
    font-family: calibri;
}

.wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field1 {
    display: flex;
    border: 2px dotted grey;
    align-items: center;
    border-radius: 10px;

}

.text {
    margin: 0px 10px;
    font-size: 12px;
    color: grey;
}

#buttonid {
    margin: 5px 7px 5px 20px;
    background: #4E6844;
    padding: 7px 15px;
    border-radius: 10px;
    color: white;
    cursor: pointer;

}

img {
    height: 35px;
}

span{
  margin:0px 10px;
}
    <div class="parentField">
  <div class="wrapper">
    <div class="field1">
      <img src="https://img.icons8.com/fluency/48/null/microsoft-powerpoint-2019.png" />
      <p class="text">Upload a Power Point presentation .pptx .pptm .ppt</p>
      <input id='fileid' type='file' hidden />
      <span id='buttonid' value='Browse'>Browse</span>
    </div>
    <span>or</span>
    <div class="field1">
      <img src="https://img.icons8.com/fluency/48/null/microsoft-word-2019.png" />
      <p class="text">Upload a Power Point presentation .pptx .pptm .ppt</p>
      <input id='fileid' type='file' hidden />
      <span id='buttonid' value='Browse'>Browse</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search