Html Froala图像对齐不起作用

我成功地在我的网站上安装了Froala，但定位图像似乎不起作用。。它们总是在左边，即使我将它们对准中间/右边

因此，在文本编辑模式下，它可以正常工作

但是在看了结果之后，所有的3次校准看起来都是一样的

这些图像具有以下类别：

class="fr-dib fr-draggable fr-fil"  // this should be left align
class="fr-dib fr-draggable"  // this should be center align (doesn't work)
class="fr-dib fr-draggable fr-fir"  // and this should be right align (doesn't work)

我找到了一种方法来解决这个问题，通过使用以下行创建自己的css： 但老实说，我认为应该有另一种方法

.fr-draggable {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.fr-fil {
    display: block;
    margin-left: 0;
    margin-right: 0;
}
.fr-fir {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

有人能帮我吗

编辑：我的网站如下所示：

---

但是现在呢？我应该改变什么吗？：/

我猜你在后端CMS中使用的是Froala；您是否也在应用程序的样式表和任何必要的命名空间类中包含了Froala的样式表？

我猜您是在后端CMS中使用Froala；您是否也在应用程序的样式表和任何必要的命名空间类中包含了Froala的样式表？

更新2:

问题解决了。。必须将class=fr视图写入显示内容的div。我太笨了。。对不起，伙计们

更新2:

---

问题解决了。。必须将class=fr视图写入显示内容的div。我太笨了。。对不起，伙计们

对我来说，问题不在于包含froala_style.min.css文件。一旦我包括对齐开始工作。

对我来说，问题是没有包括froala_style.min.css文件。一旦我包括了对齐开始工作。

我想你只是添加了这个头部

还有你的身体标签

 <div class="fr-view">
  <!-- where you display your data -->
 </div>

---

我想你只是加上这个头

还有你的身体标签

 <div class="fr-view">
  <!-- where you display your data -->
 </div>

---

---

我编辑了我的帖子。。如您所见，我包含了所有Froala的样式表：/您的代码是否包含必要的命名空间类？e、 g.img.fr-view.fr-dii？不，我没看见他们。我已经在所有文件notepad++中搜索了它们，应该在哪个文件中？也许你能为这些缺失的样式发布正确的css代码？我从官方网站下载了弗罗拉。。为什么会缺少这种样式？这些类需要存在于图像上，正如标记中显示的那样。更新..:/I不明白发生了什么我编辑了我的文章。。如您所见，我包含了所有Froala的样式表：/您的代码是否包含必要的命名空间类？e、 g.img.fr-view.fr-dii？不，我没看见他们。我已经在所有文件notepad++中搜索了它们，应该在哪个文件中？也许你能为这些缺失的样式发布正确的css代码？我从官方网站下载了弗罗拉。。为什么会缺少这种样式？这些类需要存在于图像上，正如您的标记中显示的那样。已更新..：/I我不明白发生了什么事情。您是否可以共享应用程序的链接或创建一个复制您看到的问题的示例应用程序？您是否可以共享应用程序的链接或创建一个复制您看到的问题的示例应用程序看到了吗？是的，这就是我的意思。。。还有必要的名称空间类吗？是的，这就是我的意思。。。以及任何必要的名称空间类？添加一些描述添加fr视图类对我来说很有用，但我还必须包含样式：import'froala editor/css/froala_style.min.css'；导入'froala editor/css/froala_editor.min.css'；我还使用allowedTags方法，所以为了使一切正常工作，还需要启用正确的标记。例如，在我的例子中，添加图像标题无法正常工作，因为我不允许使用span标记，后来发现了这一点。添加一些描述添加fr视图类对我来说很有效，但我还必须包含样式：import'froala editor/css/froala_style.min.css'；导入'froala editor/css/froala_editor.min.css'；我还使用allowedTags方法，所以为了使一切正常工作，还需要启用正确的标记。例如，在我的例子中，添加图像标题无法正常工作，因为我不允许span标记，后来发现了这一点。

<!-- Include external CSS. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">

<!-- Include Editor style. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

<!-- Include external JS libs. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.8.4/js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script> $(function() { $('textarea').froalaEditor() }); </script>

 <div class="fr-view">
  <!-- where you display your data -->
 </div>