CODEWITHSUNDEEP
css
superblowncolon
superblowncolon

Reputation: 185

Aligning CSS Elements When One Has Exact Width/Height

The screenshot below includes a Power BI report (the entire box) and some buttons that will be used to navigate it. The Power BI report has to have an exact height/width (1600X800), but I want the buttons to align just beneath it, regardless of screen resolution.

Full markup: https://plnkr.co/edit/B6iDWud66SKx15ctYL3o?p=info

<div style="width:100%; float: left; height:96%;">

            <div id="reportContainer" style="height: 800px; width: 1600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> </div>


    <div style="position: absolute; top: 85%; left: 50%;">
        <button class="button-secondary" onclick="pageChange()">Test button</button>
        <button class="button-secondary" onclick="pageChange()">Test button 2</button>
    </div>
    </div>

enter image description here

Upvotes: 0

Views: 58

Answers (4)

Eduardo Paoli
Eduardo Paoli

Reputation: 117

To align your buttons always in center, you can use something like this.

.buttons {
  text-align: center;
}
  <div class="buttons">
    <button class="button-secondary">Test button</button>
    <button class="button-secondary">Test button 2</button>
  </div>

Upvotes: 0

Rounin
Rounin

Reputation: 29463

You can achieve this most simply, by applying to the <body>

  • display: flex
  • flex-wrap: wrap
  • justify-content: center

If you then add to #reportContainer

  • flex: 0 0 1600px

you will ensure that #reportContainer maintains an inflexible width of 1600px, with zero capacity to either grow or shrink.

Working Example:

body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#reportContainer {
flex: 0 0 1600px;
height: 800px;
background-color: orange;
}

.button-secondary {
margin: 12px;
}
<div id="reportContainer"></div>
<button class="button-secondary">Test button</button>
<button class="button-secondary">Test button 2</button>

Upvotes: 0

dragonfire
dragonfire

Reputation: 702

If you must use position: absolute for the reportContainer, then do it on a shared parent container and place the buttons below the container with bottom: -20px.

#mainContainer {
  width: 100%;
  float: left;
  height: 96%;
}

#subContainer {
  height: 800px;
  width: 1600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
}

#buttonContainer {
  position: absolute;
  bottom: -20px;
  left: 50%;
}
<div id="mainContainer">
  <div id="subContainer">
    <div id="reportContainer"></div>
    <div id="buttonContainer">
      <button class="button-secondary" onclick="pageChange()">Test button</button>
      <button class="button-secondary" onclick="pageChange()">Test button 2</button>
    </div>
  </div>
</div>

Upvotes: 0

onyx
onyx

Reputation: 1618

You can wrap the report and buttons into a container, e.g. main-container. Then apply flexbox to achieve your goal.

<div style="width:100%; float: left; height:96%;">

  <div class="main-container" style="
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;">
    <div id="reportContainer" style="height: 400px;width: 800px; background: red;">Hi, I'm 400x800. I'm always centered and the buttons are right below me!</div>

    <div style="margin-top: 20px;">
      <button class="button-secondary" onclick="pageChange()">Test button</button>
      <button class="button-secondary" onclick="pageChange()">Test button 2</button>
    </div>
  </div>
  
</div>

Note: I modified the dimension to 400x800 (intead of 800x1600) for render purposes.

Upvotes: 1

Related Questions