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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.