CSS将文本与正确的Fiasco对齐

时间:2018-01-03 06:37:45

标签: css

说我有这一小段代码

Create a  class Name FontCache 
import android.content.Context;
import android.graphics.Typeface;
import java.util.Hashtable;

public class FontCache
{
  private static Hashtable<String, Typeface> fontCache = new Hashtable<>();

public static Typeface get(String name, Context context)
{
    Typeface tf = fontCache.get(name);

    if(tf == null)
    {
        try
        {
            tf = Typeface.createFromAsset(context.getAssets(), name);
        }
        catch (Exception e)
        {
            return null;
        }

        fontCache.put(name, tf);
    }
    return tf;
}}

Then put the below lines of code in your activity.

Typeface montserratFontType = FontCache.get("fonts/montserrat.ttf",MainActivity.this);

 yourtextview.setTypeface(montserratFontType);

At last create a "assests" folder inside your main folder then create 
a "fonts" folder inside a "assests "folder and put your montserrat.ttf 
file 

这个CSS

<header>
    <div class='top-row'>
        <div class='home-button'>
            <h1><a href="/">Garbanzo Beans</a></h1>
        </div>
    </div>
    <div class='top-row'>
        <nav class='right'>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/resume">Resume</a></li>
                <li><a href="/blog">Blog</a></li>
            </ul>
        </nav>
    </div>  
</header>

我想将About,Resume和Blog对齐,Garbanzo Beans保持在左边但是文本对齐:对;不管用。我刚刚开始一个网站,所以这只是原型,但任何人都可以提供一些解决方案吗?谢谢!

3 个答案:

答案 0 :(得分:1)

flexbox救援 https://jsfiddle.net/avvqzt35/

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

答案 1 :(得分:0)

.top-row {display:block;}  /*change from inline-block*/

nav ul, footer ul {
    display: block;
    font-family:'Museo Slab', 'Roboto', sans-serif;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    text-align: right;
}
nav ul li, footer ul li {
    display: inline-block;
    margin-right: 20px; 
}
a {
    text-decoration: none;
    color: #2F4F4F;
}
a:hover {
    color: #FF6347
}

.home-button{
      float:left;
      width:50%;
}    
.right{
     float:right;
     width:50%;
}

Flexbox绝对是您的选择,但您也可以像上面一样使用ol'浮点数。

答案 2 :(得分:0)

&#13;
&#13;
.top-row {
display: inline-block;
}


nav ul, footer ul {
    display: block;
    font-family:'Museo Slab', 'Roboto', sans-serif;
    padding: 0px;
    list-style: none;
    font-weight: bold;
    width:100%;
    text-align: right;
}
nav ul li, footer ul li {
    display: inline-block;
    margin-right: 20px;
    text-align: right;
}
a {
    text-decoration: none;
    color: #2F4F4F;
}
a:hover {
    color: #FF6347
}
.align-right{
  float:right;
  padding-top: 15px;
}
&#13;
<header>
            <div class='top-row'>
                <div class='home-button'>
                    <h1><a href="/">Garbanzo Beans</a></h1>
                </div>
            </div>
             <div class='top-row align-right'>
                <nav class='right'>
                    <ul>
                            <li><a href="/about">About</a></li>
                            <li><a href="/resume">Resume</a></li>
                            <li><a href="/blog">Blog</a></li>
                    </ul>
                </nav>
              </div>    
        </header>
&#13;
&#13;
&#13;