单击时将文本居中对齐答案

【问题标题】：Align text to the center onclick单击时将文本居中对齐
【发布时间】：2016-07-18 16:06:43
【问题描述】：

我正在为我的网站创建一个简单的文本编辑器，并且我想制作一个按钮，在单击时将文本与中心对齐。我怎样才能做到这一点？提前致谢！

【问题讨论】：

到目前为止你尝试了什么？
请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型以及should be avoided. 的问题类型

【解决方案1】：

您可以像这样使用 jquery 和一个按钮单击按钮分配给 CSS text-align 中心。

$(document).ready(function(){
  
  $('.btncenter').on('click', function(){
    $('#cenerText').css({'text-align':'center'});
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="cenerText">Write some text here </div>

<button class="btncenter">Click here for text align center about div section </button>

【讨论】：

【解决方案2】：

这允许您输入文本，将其添加到页面并居中：

$('.add').on('click', function(){
  var text = $('textarea').val();
  
  $('p').html(text);
});

$('.center').on('click', function(){  
  var centered = document.createElement('center');
  centered.appendChild($('p')[0]);
  $('body').append(centered);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

<button class='add'>
  enter text
</button>
<button class='center'>
  center
</button>

<p>
  
</p>

【讨论】：

【解决方案3】：

在点击事件上添加 CSS 样式。尝试这个。希望它会有所帮助。

/*Java Script */
    function doCenter(){    
        document.getElementById("my_text").style.textAlign="center";
    }

<html>
    <head>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
     
     <!-- Buttons -->
     <input type="button" value="Center" onclick="doCenter()"/>
     <br />
     
     <!-- Text area -->
     <textarea class="text_edit" id="my_text"></textarea>
     <br />
    
    </body>
</html>

【讨论】：

这确实有帮助，谢谢！但是，现在的问题是我的编辑器中的所有内容都是集中的 - 有什么方法可以只集中突出显示的文本？