html - 如何使 svg 图标和一些文本处于完美对齐状态？

Question

http://jsfiddle.net/njukyzgj/1/

HTML:

<div id="logo-wrapper">

    <div class="logo" style="
max-width: 100px;"><svg id="logo" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="125px" height="125px" viewBox="0 0 125 125"><defs><g id="arl"><path fill="#FEDD76" stroke="none" d="M 34.85 90.25Q 31.85 87.25 29.7 84.05L 9.75 96.2Q 13.4 101.75 18.35 106.7 36.65 125 62.5 125 82.85 125 98.45 113.8L 84.7 94.95Q 75 101.7 62.5 101.7 46.3 101.7 34.85 90.25 Z"></path><path fill="#83D9F0" stroke="none" d="M 61.3 23.35L 61.3 0Q 36.2 0.4 18.35 18.3 0 36.6 0 62.5 0 80.1 8.5 94.15L 28.4 82Q 23.35 73.3 23.35 62.5 23.35 46.3 34.85 34.85 45.9 23.75 61.3 23.35 Z"></path><path fill="#FB9CBE" stroke="none" d="M 90.25 90.25Q 88.5 91.95 86.65 93.45L 100.35 112.3Q 103.65 109.75 106.7 106.7 124.6 88.85 125 63.75L 101.7 63.75Q 101.3 79.15 90.25 90.25 Z"></path><path fill="#F66864" stroke="none" d="M 84.45 30Q 91.25 20.5 98.1 11 83.05 0.35 63.75 0L 63.75 23.35Q 75.3 23.65 84.45 30 Z"></path><path fill="#81BE94" stroke="none" d="M 106.7 18.3Q 103.5 15.1 100.05 12.45 93.2 21.9 86.4 31.35 86.35 31.35 86.35 31.4 88.4 33 90.25 34.85 101.3 45.9 101.7 61.3L 125 61.3Q 124.6 36.2 106.7 18.3 Z"></path></g></defs><g transform="matrix( 1, 0, 0, 1, 0,0) "><use xlink:href="#arl"></use></g></svg></div>
    <div class="slogan">
      <h1>A Logo Website!</h1>
      <h2 class="weblink">mylogo.com</h2>
      <h3>something to say here</h3>
    </div>

</div>

CSS:

body{font-family:"Tahoma"}
.logo{float:left;width:30%}
.slogan{float:left}
h1, h2, h3{margin:0}
#logo-wrapper{width:100%}

我想要的:

1. .logo 始终占据其父 div #logo-wrapper 的 30%，而 .slogan 占据其余部分。
2. 随着宽度变小，(即在移动设备上)，.logo 将收缩以让 .slogan 有足够的空间
3. 两部分将垂直居中对齐。

我试了很多方法都得不到我想要的。

Answer 1

从

中删除max-width: 100px;

<div class="logo" style=" max-width: 100px;">

Working Fiddle

编辑:

要使垂直居中，请将 display: table-cell; 和 display: table-cell; 给两个类。 .logo 和 .slogan 并删除 float:left。

Updated Fiddle