标签: text-align

HTML

<div id="menu">
    <a href="#">Commissions</a>
    <a href="#">Business Setup</a>
    <a href="#">Administrator</a>
    <a href="#">Content Management</a>
    <a href="#">Inventory</a>
    <a href="#">Communications Tools</a>
    <a href="#">Genealogy</a>
    <a href="#">Reports</a>
</div>

CSS

#menu {
    width: 1000px;
    float: left;
    font-size: 9pt;
    text-align: justify;
}
#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
}
#menu a:hover {
    text-decoration: underline;
}

我想让每个链接都有整个宽度.我试着用text-align:justify来实现.但它不起作用.我怎样才能做到这一点？

我使用Flexigrid的简单解决方案(示例1)

http://www.flexigrid.info/

我要做的是将其中一列中的文本对齐到右侧.有没有办法在不连接JSON文件的情况下执行此操作(示例3)？

我试图集中导航.CSS text-align:center; 不管用.它似乎不会影响导航的任何方式,形状或形式.

这是我的HTML:

<nav id="user_nav"><ul>
       <li><a href="#">Friends</a></li>
       <li><a href="#">Followers</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Interests</a></li>
</ul></nav>

这是我的CSS:

#user_nav {
    height: 60px;
    border-bottom: 1px solid black;
    width: 100%;
}

#user_nav ul {
    margin: 0 auto;
    width: 100%;
}

#user_nav ul li {
    list-style: none;
    display: inline;
    text-align: center;
}

#user_nav ul li a {
    padding: 15px 25px 0 0;
    font-size: 18px;
    float: left;
}

请注意:我正在尝试使链接水平和垂直居中.

如果有更好的方法来做到这一点,而不是我现在这样做,我愿意接受建议.

请帮我.

我在格式化输出时遇到问题.我希望每行文本在左侧是水平的.这是我正在使用的代码.

<div style="text-align: left;">
    <pre style="width: 75%; margin-left:auto; margin-right:auto;"><code class="sql">
        <c:out value="${snippet.query}"/>
    </code></pre>
</div>

虽然样式要求文本对齐div的左侧,但输出的第一行始终缩进.为什么会这样？我还不能发布图片,但这就是它的样子:

            CREATE SCHEMA "Trading";
SET SCHEMA '"Trading"';
CREATE STREAM "Orders"
(
   orderTime TIMESTAMP,
   orderId INTEGER,
   productId INTEGER,
   quantity INTEGER,
   unitPrice DECIMAL(11,2),
   shippingState CHAR(2)
);
CREATE STREAM Shipments
(
   shipTime TIMESTAMP,
   orderId INTEGER,
   warehouseState CHAR(2)
);  

我注意到如果我删除'pre'标签我不再有这个问题,但如果没有这些标签,则不会出现正确的文本突出显示.我将变量片段传递给jsp,如下所示:

  request.setAttribute("snippet", selectedQuery);

在将数据发送到jsp之前,我已经测试了这些数据的样子.我观察了System.out.print()中的变量,并且String本身没有缩进.selectedQuery是一个包含多个String变量的对象.

谢谢您的帮助.

编辑:我已尝试在div,pre和code标签中使用text-indent,但这些都没有任何效果.

过去几天我已成功使用此处描述的方法(链接到文章).

它显示了如何通过将text-align:justify应用于父容器来避免计算网格中块的基于百分比的边距.

An:在psuedo元素之后确保总是将"text"强制到下一行以确保它是正确的.

但是在这个特定的实例中(链接到jsFiddle),块不响应text-align:justify.下面的代码在其他地方一直很好用,所以有些东西我不见了.

HTML

<div class="container"><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div></div>

CSS

.container {
     font-size: 0.1px;
     text-align:justify;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.contents {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

我想在HTML和CSS的同一行中左对齐一些文本并将另一个文本居中.我还想要一个margin-left左对齐文本.

这是我目前的做法:

HTML:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1>CENTER</h1>
</div>

CSS:

.align-left {
  float: left;
  margin-left: 20px;
}

#wrapper {
  text-align: center;
}

这适用于左对齐和右对齐,但边距也会推动居中文本.我认为这是因为float: left在页面流中保留左对齐文本.

非常感谢你:)

我正在制作一个网站，其中包含一些我想要垂直居中的列表，但是当我添加text-align: center;到 时ul，它似乎只将它应用于li父ul元素内的第一个元素。我也尝试将 css 应用到单个li元素本身，但这很奇怪地给出了相同的结果。

列表：https : //gyazo.com/d44db5e54321ea61dec4665c80013e44

<ul class="demo-list-item mdl-list">
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                2.5 uur onbeperkt eten vanaf 45 personen: &#8364;245,-.<br/> Bij hogere deelname: &#8364;5,50 pps      
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Soep naar keuze
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Puntzak/bakje friet
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Frikandel
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Kroket
            </span>
        </li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                Bami/nasi schijf
            </span>
        </li> …

我已经将多种颜色的图像地图放到了我的网站上，所以我想制作一个“div”块，并在它旁边解释该颜色在地图上代表什么。但是，当我尝试这样做时，文本只是位于“div”下方，如下所示：

#dark_green {height: 40px;
width: 80px;
background-color: #009933; }

#light_green {height: 40px;
width: 80px;
background-color: #00ff00;
 }

#dark_red {height: 40px;
width: 80px;
background-color: #ff0000;
 }

#light_orange {height: 40px;
width: 80px;
background-color: #ff8c1a;
 }

<div id="dark_green"></div> - Dark Green
<br>
<div id="light_green"></div> - Light Green
<br>
<div id="dark_red"></div> - Dark Red
<br>
<div id="light_orange"></div> - Light Orange

如何使文本与每个“div”相邻对齐？

我想将我的表格居中在它所在的水平行的中心。我认为这很简单

#control {
    text-align: center;
}

我要居中的元素是

<div id="control" class="btn">
    <div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>
    <span>Start</span> 
</div>

但是，该元素仍未居中 - https://jsfiddle.net/xwdnvcy5/58/。我没有得到什么非常明显的东西，但我无法说出它是什么。

在上面的附件中，last span(last word- "for") 有问题；它实际上超出了我的灰色区域（这实际上是带有类文本框的 div 标签）。

我真的没有得到这个问题。html 代码也如下所示。显示的边界<span>是因为我只是想问一下，两者之间存在一些差距<span>，这是导致最后一个字问题的原因吗？那么如何缩小这个差距呢？

<div style="left:0pt; top:0pt; width:612pt; height:792pt; position:absolute;" class="page">
      <div style="left:103.2pt; top:189pt; width:396pt; height:156pt; position:absolute; background-color:rgb(191,191,191); overflow:hidden; border:0px Solid rgb(0,0,0);" class="textFrame">
        <p style="text-align: justify; padding-top: 0pt; padding-bottom: 0pt;">
          <span class="ln" style="height: 14.4pt; width: 396pt;">
            <span style="font-size: 12pt; font-family: F0; word-spacing: 45.9943pt; width: 197.802pt; letter-spacing: 0em; text-align: left; color: rgb(0, 0, 0); border: 0.1px solid red; display: inline-block;">Subject to the</span>
            <span style="font-size: 24pt; font-family: F0; width: 64.9904pt; letter-spacing: 0em; text-align: …

即使我制作重力中心文字仍然在左边.我假设必须有一个方法来改变文本对齐(我已经尝试过android:textAlignment ="center")

我在下面列出了截图,但没有足够的声誉来展示它.

<!-- language: lang-xml-->    
<Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="50"
                android:gravity="center"
                android:text="Button" />

还试图让match_parent仍然是同样的问题.

编辑整个XML

<!-- language: lang-xml-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/etCommands"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Type a Command"
        android:password="true" >
    </EditText>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Button" />
    </LinearLayout>

    <TextView
        android:id="@+id/tvResults"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="invalid" />

</LinearLayout>

截图

示例演示:JSFIDDLE

正如你在我看到的那样JSFIDDLE.文本TELL ME MORE不是垂直对齐中心.

我怎样才能做到这一点？