首页htmlheaderPage Widget - 如何样式包含左/右元素的标题

Page Widget - 如何样式包含左/右元素的标题

我们想知道如何样式包含左/右元素的标题。

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {
  height: 100%;
  width: 100%;
  font-size: 13px;
}

.parent {
  background-color: grey;
  height: 20%;
  line-height: 1.6em;
  font-size: 1.6em;
  min-height: 1.6em;
  position: relative;
}

.left, .right {
  position: absolute;
  top: 50%;
  margin-top: -0.8em;
}

.left {
  background-color: yellow;
  padding-left: 20px;
  left: 0;
}

.right {
  background-color: red;
  padding-right: 20px;
  right: 0;
}
</style>
</head>
<body>
  <div class="parent">
    <div class="left">Blah left</div>
    <div class="right">Blah right</div>
  </div>
</body>
</html>