标签: text-align

如何设置text-aligncom.google.gwt.dom.client.Style对象？

我正在尝试在一个较小的区域中将文本右对齐。当容器较小时，它将变为左对齐。反正有强迫它正确对准吗？

div 
{ float: right;
width: 100px;
height: 50px;
text-align: right;
border: thin solid black;
}

https://jsfiddle.net/a362zr54/

我在这里有一个问题,我想把文本#top_page h1居中,但它不起作用,我不知道为什么.谁能提出一些想法？我尝试了一切,但文字对齐:中心; 和浮动:右或左也不起作用.

我搜索谷歌寻求帮助,并查看堆栈溢出相同的问题,但没有一个解决问题,所以我要求你们帮忙.

body {
        background: url(img/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      display: inline-block;
      font-family: 'Cabin', sans-serif;

    }

    a {
        text-decoration: none;
        color: black;
        font-family: 'Cabin', sans-serif;
    }

    li {
        float: right;
        margin-top: 3px;
        margin-right: 50px;
        color: white;
        font-family: 'Cabin', sans-serif;
        font-size: 15px;
    }

    header {
        display: block;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background: white;
        font-family: 'Cabin', sans-serif;
        z-index: 999999;
    }

    a:hover {
        color: crimson;
        font-family: 'Cabin', …

我有198px-198px的方形按钮.每个按钮下面都有一个图像和文字.由于并非所有图像都是正方形,因此我将所有图像的最大宽度和最大高度设置为128px,以便它们按比例缩放.不幸的是,我无法将文本与底部中心对齐.

我无法使用padding-top: 65px哪个解决了其他一些SO问题,因为图像的高度可变.

我尝试position: absolute; top: 180px了文本的范围,但我不能让它在那之后居中(不能只指定left: 10px因为文本有可变的长度)

谢谢你的帮助.

这是一个JSFiddle https://jsfiddle.net/vbgg3keu/3/ (注意:您可以扩展输出窗格的宽度,以便所有按钮在同一行上排成一行)

HTML:

<button class="square-button">
<img class="small-img" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/><br/>

<span class="button-text">This text is too high</span>
</button>

<button class="square-button">
<img class="small-img" src="http://etc.usf.edu/clipart/36400/36459/ruler1_36459_lg.gif"/><br/>

<span class="button-text">This text is too high</span>
</button>

<button class="square-button">
<img class="small-img" src="https://tall.life/wp-content/uploads/2013/04/Giraffe.jpg"/><br/>

<span class="button-text">This text is the correct height</span>
</button>

<button class="square-button">
<img class="small-img" src="https://lh3.googleusercontent.com/dB3Dvgf3VIglusoGJAfpNUAANhTXW8K9mvIsiIPkhJUAbAKGKJcEMPTf0mkSexzLM5o=w300"/><br/>

<span class="button-text">This text is the correct height</span>
</button>

CSS:

.square-button {
  width: 198px;
  height: 198px;
  float: left;
}
.small-img …

我有一个脚本来更改textarea的文本对齐方式,其ID textbox1如下:

 // <![CDATA[
 function alignFix() {

 document.getElementById("textbox1").style.textAlign="left";

 }
 // ]]>

这是标记:

 <textarea cols="36" rows="25" readonly="readonly" id="textbox1" name="textbox" style="text-align: center;">dynamic text populates via another script unrelated to problem</textarea>

这是触发器:

 <select class="c9" onchange="showCenterTemplates(this); alignFix();">

它工作得很好.现在我有一个以上的textarea我需要这个脚本来工作,所以我认为这将是一个简单的转换document.getElementById,document.getElementsByTagName但我的无知/惊喜,这不是很好.

我搜索了问题和论坛以及Google,并找到了document.getElementsByTagName的实例,但不是我需要它的方式.

似乎在使用时getElementsByTagName,必须始终声明一个变量(任何人都可以确认这是否属实？)所以我试过:

 // <![CDATA[
 function alignFix() {

 var textbox = document.getElementsByTagName('textarea');
 style_textbox = textbox.style;
 style_textbox.textAlign="left";
 }
 // ]]>

但是style_textbox is null or not an object在测试时我遇到了错误.有人可以帮帮我吗？首先十分感谢.

PS脚本的原因是因为textareas的原始内容需要居中,但是当用户开始从使用脚本<select>动态填充的模板中选择模板时,这些模板需要在其中包含左对齐的文本.希望有道理.<textarea>showCenterTemplates()<textarea>

Hai我有一个列表(动态我创建了html),在该列表中我添加了许多超链接.现在我想在中心添加该链接如何做到这一点？请帮助我

"<FONT SIZE=5;face=Droid Sans>"+"<p style=text-align:center>"+"<a  id='"+i+"'  href='#' >" +value +  "</a>"+"</p>"+"<hr style='border:1px solid #EBEBEB'/>"+"</FONT>"+ "</li>");

我找不到如何添加按钮来格式化我的文本：

text-align:center;
text-align:left;
text-align:right;
text-align:justify;

我有v4版本

http://ckeditor.com/demo

我尝试找到解决方案，但只找到一些问题帖子。

也许使用插件？

我正在使用 ckEditor，例如：

<textarea id="monday" class="ckeditor" name="monday" ><?php echo $this->datas['monday']; ?></textarea>

谢谢

我想把我的锚标记放在它的div中.

这是html文件:

<div class="body_div">
  <div class="verticle_center">

    <div id="links">
      ...
      <div id="linkedin" class="fill">
        <a href="#">linkedin</a>
      </div>
      ...
    </div>

  </div>
</div>

这是css.scss:

.body_div {
  display: table;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;

  .verticle_center{
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
  }
   #linkedin {
    text-align: center;
    color: rgba(26, 132, 188, 1);
    box-shadow: inset 0 -2px 0 rgba(26, 132, 188, 1);
    display: inline;
    margin: 10px 7px;
    padding: 5px 5px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    z-index: 1;
    cursor: pointer; …

我觉得我想得太多了或错过了一些小事。我需要使用 Foundation 将文本居中放置在 div 中。这是我目前正在使用的：

[1]<div class="row">
[2]    <div class="small-12 medium-12 large-10 columns">
[3]        My Text for Today
[4]    </div>
[5]</div>

我尝试用以下内容替换第 1 行：

<div class="row align-center">

我尝试用以下内容替换第 2 行：

<div class="small-12 medium-12 large-8 columns centered">

我尝试用以下内容替换第 5 行：

<p class="text-centered">My Text for Today</p>

我已经尝试了以上所有三个的组合，但绝对没有运气。

我试图在没有 CSS 的情况下做到这一点。试图只用 Foundation 来做到这一点。如何使My Text for Today文本居中？

我正在尝试垂直对齐nav中的条形的 tex display: flex;。我使用了以下代码，但文本仍然与nav容器的顶部对齐，并且不会向下移动到中心。你能帮我理解我做错了什么吗？我尝试过在 CSS 中移动align-items: center;到nav{}andnav ul li{}但它没有改变任何东西。

nav {
  background-color: aquamarine;
  width: 100%;
  height: 70px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

nav ul li {
  font-size: 3rem;
}

<nav>
  <ul>
    <li>About Us</li>
    <li>Event Schedule</li>
    <li>Contact Us</li>
  </ul>
</nav>