I want to have a div in the center of the window and place another one right next to it without moving it.
Right now I have:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.centered {
text-align: center;
}<div class="wrapper">
<div class="draw-area centered"></div>
<div class="result centered"></div>
</div>With this code the divs are centered horizontally and vertically, but the div with class draw-area is not exactly in the middle of the window because of the div with class result. Can someone please help me? Is flexbox the wrong tool to use here?
Edit:
Here is more of my code for more context:
<div class="wrapper">
<div class="draw-area centered">
<div class="canvas-container">
<canvas id="canvasPosition" class="canvasDrawing" height="400" , width="400"></canvas>
</div>
<div class="button-container">
<button id="clearDrawing" onclick="clearArea()">Clear Area</button>
<button id="submitDrawing" onclick="sendImage()">Submit</button>
</div>
</div>
<div class="result centered">
<img id="resizedImage" src="/backend/example_images/0.png" alt="Received Image">
</div>
</div>I want the image to be next to the canvas.
3
CSS Grid would probably be a better option.
.wrapper {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.draw-area {
padding: 10px;
background: lightblue;
}
.centered {
grid-column: 2;
}
.result {
padding: 10px;
background: lightgreen;
justify-self: start;
}<div class="wrapper">
<div class="draw-area centered">I'm centered</div>
<div class="result">Result</div>
</div>1