html - 元素与 CSS 对齐

Question

我是 HTML 和 CSS 的新手。我正在为(水平)元素对齐而苦苦挣扎，我将不胜感激所提供的任何帮助。这是我到目前为止得到的:

http://jsfiddle.net/vayacondios2015/umpk0xht/

HTML

<div class="mainbody">
    <h2>This is uppercase title</h2>

    <div class="right">
        <a href="http://www.w3schools.com/html/default.asp">Link1</a>
        &nbsp;&nbsp;&nbsp;
        <a href="http://www.w3schools.com/css/default.asp">Link2</a>
    </div>

    <div class="left">
    <form>
        <label for="textarea">This is a comment about textarea</label><br>
        <textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
        <label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
        <input type="submit" value="Send"><br><br>
    </form>
    </div>

    <div class="middle">
        <a href="http://www.w3schools.com/js/default.asp">Link3</a>
        &nbsp;&nbsp;&nbsp;
        <select><option>Select1</option></select>
        &nbsp;&nbsp;&nbsp;
        <select><option>Select2</option></select><br><br>
    </div>
</div>

<div class="mainbody">
    <a href="#TOP">TOP</a>
    &nbsp;&nbsp;&nbsp;      
    <img><a href="http://www.w3schools.com/sql/default.asp"> Home</a><br>
    &copy;Company
</div>

上面链接 jsfiddle 中的 CSS(无法正确附加)。

这是我希望的样子: http://i.stack.imgur.com/VCWcL.jpg + 以页面为中心。

我也期待着 HTML 语义修正，如果你有额外的时间和意愿的话。

Answer 1

试试这些 CSS。我帮你查这个链接https://jsfiddle.net/35sgma83/

.middle {
  text-align: center;
}
div.mainbody {
  text-align: center;

}