I have a title and a div horizontally, what I am trying to do is to center the div with the corresponding title.
As can be seen in the image, it cannot be centered properly.
This is my code:
<h1 id='<?= str_replace(" ", "", $data->title); ?>'><?= $data->title; ?></h1>
<?= $data->text; ?>
<div class="flexbox">
<div class="contenido-flex">
<blockquote>
<p><?= $data->title; ?></p>
</blockquote>
<pre class="is-paddingless" id="a<?= esc($data->id); ?>"><code class="<?= strtolower($data->tip); ?>">
<?php if ($data->fdc== "JSON") : ?>
<?= json_decode($data->cod); ?>
<?php else : ?>
<?= $data->cod; ?>
<?php endif; ?>
</code></pre>
</div>
</div>
.flexbox {
/* */
height: 100vh;
}
.contenido-flex {
margin-top: -700px;
}
You could use align-items: center; Here is an example:
.flexbox {
background: red;
height: 100vh;
display: flex;
align-items: center;
align-content: center;
}
.contenido-flex {
background: green;
}<h1 id='123'>MyTitle</h1>
<div class="flexbox">
<div class="contenido-flex">
<blockquote>
<p>Title</p>
</blockquote>
<pre class="is-paddingless" id="a-11>"><code class="123">
Some Data
</code></pre>
</div>
</div>