I am currently developing a dynamic slideshow feature.
My challenge is to ensure that any text I input dynamically is centered both horizontally and vertically within a designated box.
My current code snippet looks like this:
HTML
<body>
<div class="slide">
<span class="content">
<b>Hello. This text should be:</b><br><br>
- left-aligned but <br>
- centered in the grey box<br>
- even if it changes<br>
- the center of the white box <br>
should match the center of the grey one.
</span>
</div>
</body>
CSS
.slide {
position:relative;
background-color: #ddd;
width: 300px;
height: 300px
}
.content {
position: absolute;
top: 30%;
left: 15%;
background-color: #fff;
}
OUTPUT
The current implementation does not perfectly center the text, especially if the content changes. Does anyone have suggestions on how to improve this?