div 内の要素を中央に配置する方法を理解しようとしています。私が使用しているこの基本的なコードがあり、「これはボタンです」要素を中央に配置しようとしています
<body>
<div style="width:960px;background-color:#d7d7d7;">
<div style="
width:400px;
padding:10px;
height:auto;
background-color:#006699;
display:inline-block;
">
<p> Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div style="
width:100px;
padding:10px;
height:auto;
background-color:#b1b1b1;
float:right;
display:inline-block;
margin:auto!important;
vertical-align:middle;
">
<p>This is a button</p>
</div>
</div>
</body>
基本的には 1 div で、左側にテキストがあり、右側の中央に「これはボタンです」というラベルが 2 つに分割されていますが、中央に配置する方法がわかりません。ありとあらゆる方法を試しました。
すべてのヘルプ/アドバイスをいただければ幸いです。