I'm currently working with this code snippet:
<div class="outer">
<ul class="list">
<li class="inner">
<div class="line">information1</div>
<div class="line">hyperlink1</div>
</li>
<li>
<div class="line">information2</div>
<div class="line">hyperlink2</div>
</li>
<li>
<div class="line">information3</div>
<div class="line">hyperlink3</div>
</li>
<li>
<div class="line">information4</div>
<div class="line">hyperlink4</div>
</li>
</ul>
<input type="submit" id="send" value="send" class="button"/>
</div>
In addition, here is the css for styling:
.outer
{
display: table;
border: 1px solid;
padding: 5px;
}
.list
{
list-style: none;
padding: 5px;
}
.inner
{
display: table-row;
padding: 5px;
}
.line
{
display: table-cell;
border: 1px solid;
border-radius: 5px;
}
.button
{
top:50%;
left:50%;
}
When you view the output here, you'll see how everything looks.
The challenge I'm facing now is how to consistently center the button within the 'outer' div regardless of its width. Take a look at this example here. It's important that the button remains in the center without having to adjust the CSS every time the size of the 'outer' div changes. Even if the 'outer' div is dynamic, the button should always be centered.
Your help on this matter would be greatly appreciated. Thank you!