首页 \ 问答 \ 如何中心引导转盘内的文本？(How to center text inside bootstrap carousel?)

如何中心引导转盘内的文本？(How to center text inside bootstrap carousel?)

mysql 
 1需要一个简单的文本旋转木马像下面。 不会有转盘上的任何图像。 只是文本。 现在看来不错，但旋转木马控制，并且在两侧的箭头灰色边缘不适合阅读，所以我试图内线中锋文字，我不能够做到这一点。 1中所用“块中心”类以及推尝试了各种组合，具有行和容器传送带内容类的内部拉沿。 没有成功呢。 
 

 下面是我的代码。 
 

 

 
 
 
  
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="my-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#my-carousel" data-slide-to="1"></li>
                    <li data-target="#my-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#1</h3>
                                <p>Proin at elementum sapien. Nam in sapien egestas, tempor sem in, porta diam. Integer bibendum tincidunt accumsan. Praesent ultrices metus ut urna vulputate, vel egestas tortor accumsan. Etiam nec dolor tempor, aliquet metus aliquet, scelerisque leo. Nunc in eros et nisl scelerisque bibendum. Suspendisse viverra dui in odio pretium rhoncus. Suspendisse dolor libero, laoreet et feugiat ac, lobortis et ipsum. Etiam lacus ipsum, vestibulum quis consequat sed, molestie vitae lectus. Praesent eu sapien vel risus iaculis rhoncus et et mi.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#2</h3>
                                <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lorem quam, blandit sed laoreet non, scelerisque eu est. Fusce non urna vel ligula ultrices scelerisque. Cras non venenatis libero. In hac habitasse platea dictumst. Cras mattis ligula ac mauris aliquet condimentum. Quisque accumsan posuere accumsan. Nam facilisis lectus posuere nisi dignissim dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam interdum purus accumsan justo fermentum, id vulputate nibh luctus. Maecenas gravida elit in nulla sollicitudin, eu egestas ipsum luctus.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#3</h3>
                                <p>Donec consequat eget nisi quis volutpat. Cras vitae tellus dui. Sed bibendum quam eget tempus luctus. Donec laoreet, diam ut condimentum malesuada, libero nisi feugiat nulla, a convallis ante urna a sem. Vivamus eget nibh et nunc iaculis varius. Nam in nunc velit. Quisque id lacinia lorem, ut dictum ipsum. Nullam eu fermentum dui, eget elementum massa. Duis tincidunt eros et euismod porta. Curabitur consectetur, ligula ac blandit maximus, nisl nunc luctus arcu, ornare rhoncus neque urna non neque. Donec in quam non nunc sollicitudin accumsan. Phasellus accumsan sit amet nibh nec suscipit. Donec eget congue nisi, sollicitudin feugiat odio. Donec congue diam orci, in eleifend nulla pharetra in. Integer felis lacus, facilisis id pharetra non, facilisis ut quam.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#my-carousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#my-carousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
 
 
 

 

 

 演示 
 

 在这里输入图像描述 

I need a simple text carousel like below. there will not be any image in carousel. Just text. Now it seems fine but the carousel controls, the arrows and that greyish edges at the both sides are not suitable for reading so i am trying to center text inside and i am not able to do it. I used "block-center" class as well as tried various combination of push,pull along with rows and container inside the carousel-content class. No success yet.
 

below is my code.
 

 

 
 
 
  
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="my-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#my-carousel" data-slide-to="1"></li>
                    <li data-target="#my-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#1</h3>
                                <p>Proin at elementum sapien. Nam in sapien egestas, tempor sem in, porta diam. Integer bibendum tincidunt accumsan. Praesent ultrices metus ut urna vulputate, vel egestas tortor accumsan. Etiam nec dolor tempor, aliquet metus aliquet, scelerisque leo. Nunc in eros et nisl scelerisque bibendum. Suspendisse viverra dui in odio pretium rhoncus. Suspendisse dolor libero, laoreet et feugiat ac, lobortis et ipsum. Etiam lacus ipsum, vestibulum quis consequat sed, molestie vitae lectus. Praesent eu sapien vel risus iaculis rhoncus et et mi.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#2</h3>
                                <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lorem quam, blandit sed laoreet non, scelerisque eu est. Fusce non urna vel ligula ultrices scelerisque. Cras non venenatis libero. In hac habitasse platea dictumst. Cras mattis ligula ac mauris aliquet condimentum. Quisque accumsan posuere accumsan. Nam facilisis lectus posuere nisi dignissim dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam interdum purus accumsan justo fermentum, id vulputate nibh luctus. Maecenas gravida elit in nulla sollicitudin, eu egestas ipsum luctus.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#3</h3>
                                <p>Donec consequat eget nisi quis volutpat. Cras vitae tellus dui. Sed bibendum quam eget tempus luctus. Donec laoreet, diam ut condimentum malesuada, libero nisi feugiat nulla, a convallis ante urna a sem. Vivamus eget nibh et nunc iaculis varius. Nam in nunc velit. Quisque id lacinia lorem, ut dictum ipsum. Nullam eu fermentum dui, eget elementum massa. Duis tincidunt eros et euismod porta. Curabitur consectetur, ligula ac blandit maximus, nisl nunc luctus arcu, ornare rhoncus neque urna non neque. Donec in quam non nunc sollicitudin accumsan. Phasellus accumsan sit amet nibh nec suscipit. Donec eget congue nisi, sollicitudin feugiat odio. Donec congue diam orci, in eleifend nulla pharetra in. Integer felis lacus, facilisis id pharetra non, facilisis ut quam.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#my-carousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#my-carousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
 
 
 

 

 

Demo
 

enter image description here

原文：https://stackoverflow.com/questions/32287153
更新时间：2023-10-20 16:10

最满意答案

 我已经提高了Quassnoi和Software Guy的评论，他们一起说服了我，这只是mysql / mysqldb / mysqlquerybrowser中的一个错误。 
 

 我在查询浏览器和mysqldb中更改了表名（到“dictionary_pair_cons”）并且问题消失了。 

I've uprated the comments from Quassnoi and Software Guy, together they've persuaded me that it's just a bug in mysql/mysqldb/mysqlquerybrowser.
 

I changed the table name (to "dictionary_pair_cons") and the problem went away, in both the query browser and mysqldb.

相关问答

更多

  • 为什么这个表名需要反向标记？(Why does this table name require back-ticks?)[2023-03-27]

    我已经提高了Quassnoi和Software Guy的评论，他们一起说服了我，这只是mysql / mysqldb / mysqlquerybrowser中的一个错误。 我在查询浏览器和mysqldb中更改了表名（到“dictionary_pair_cons”）并且问题消失了。 I've uprated the comments from Quassnoi and Software Guy, together they've persuaded me that it's just a bug in mys ...

  • Pycharm中的代码高亮显示：在反标后删除绿色背景(Code highlight in Pycharm: remove green background after back-ticks)[2023-01-13]

    我认为你不能，这是主题的乐趣。 Found it! Preferences > Editor > Colors & Fonts > General Code > Injected language fragment Turn off background.

  • 这个Javascript需要什么？(What is this Javascript “require”?)[2021-12-06]

    require()不是标准JavaScript的一部分。 在您的问题和标签的上下文中， require()被内置到Node.js中以加载模块 。 这个概念类似于C / Java / Python / [在这里插入更多的语言]导入或包含。 模块的概念类似于通过