尝试用圆圈中的两行文字修改我的CSS徽标

Question

我正在尝试修复我的网站主徽标。这个名字是Cerebro Design，我想把Cerebro放上并设计下来，就像这样：

这是我到目前为止的CSS代码：

＆＃13;

＆＃13;

<div style="margin:auto;   
            width:500px;
            height:500px;
            border-radius:250px;
            font-size:50px;
            color:#fff;
            line-height:500px;
            text-align:center;
            background:#000;">
  CEREBRO DESIGN
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

#logo{
  margin:auto;   
  width:500px;
  height:500px;
  border-radius:250px;
  font-size:80px;
  color:#fff;
  text-align:center;
  background:#000;
}
#logo-text{
  margin-left:70px;
  padding-top: 160px;
  max-width:30px;
}

<div id="logo">
  <div id="logo-text">CEREBRO DESIGN.</div>
</div>

然后你只需要添加正确的字体就可以了。

注意，最好使用外部或内部（<style>...</style>）css，而不是在元素上使用style="..."。

Answer 2

我会使用图片作为徽标，但如果你想用css方式，这可能适合你。

Demo

div {
    margin:auto;
    width:500px;
    height:500px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
div:before, div:after{
    display:inline-block;
    position: absolute;
    color: white;
    font-size: 95px;
    width:500px;
    height:500px;
    text-align: center;
    left: 0;
}
div:before{
    content: 'CEREBRO';
    top: -10%;
}

div:after{
    content: 'DESIGN.';
    top: 10%;
}

Answer 3

你能分享你正在使用的字体吗？我的快速方法（我在小型笔记本电脑中）就是这样的：

HTML：

Installing executable(s) in C:\Program Files\Haskell\bin
Warning: The directory C:\Program Files\Haskell\bin is not in the system

CSS：

<div class="cerebro-logo">
    <span class="padding">Cerebro 
        <span class="design-text">Design .</span>
    </span>
</div>

提示：您可以使用字母间距（例如）在＆＃34;设计上获得间距效果。＆＃34;。

JSFIDDLE链接：http://jsfiddle.net/f5qrbbx5/

Answer 4

只需添加文字，无需计算任何边距或填充。

.circle {
  width: 500px;
  height: 500px;
  margin: 20px auto;
  background: #000;
  border-radius: 50%;
  color: #fff;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 94px;
  text-align: center;
  white-space: nowrap;
}
 
.circle:before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-right: -0.25em;
  vertical-align: middle;
}
.circle > * {
  display: inline-block;
  max-width: 80%;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}

<div class="circle">
  <span>CEREBRO<br>DESIGN.</span>
</div>