0
我在我的网站上成功地安装了Froala，但是定位图像似乎不起作用。即使我将它们对齐到中间/右边，它们也总是在左边..Froala图像对齐不起作用
所以在文本编辑模式下，它工作正常..
但看后的结果，所有的3个aligments看起来是一样的。
的图像有这些类：
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;
}
有人可以帮我吗？
编辑：我的网站看起来像这样：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" href="common/css/main.css" />
<link rel="stylesheet" type="text/css" href="common/css/custom.css" />
<link rel="stylesheet" type="text/css" href="common/css/adminPOST.css" />
<!-- FROALA CSS -->
<link href="common/plugins/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="common/plugins/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/char_counter.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/code_view.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/colors.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/emoticons.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/file.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/fullscreen.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/image_manager.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/line_breaker.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/quick_insert.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/table.css">
<link rel="stylesheet" href="common/plugins/froala-editor/css/plugins/video.css">
<!-- JS -->
<script src="common/js/jquery-1.11.1.min.js"></script>
<script src="common/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="common/js/jquery.elastic.source.js"></script>
<script src="common/js/main.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script src="common/js/adminPOST.js"></script>
<!-- FROALA JS -->
<script type="text/javascript" src="common/plugins/froala-editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/char_counter.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/colors.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/emoticons.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/entities.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/file.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_family.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/font_size.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/fullscreen.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/inline_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/line_breaker.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quick_insert.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/quote.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/save.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="common/plugins/froala-editor/js/languages/hu.js"></script>
</head>
<body>etc...</body></html>
UPDATE：
我发现在CSS/froala_style.css的Froala图像样式（或分钟版本）：
/**
* Image style.
*/
a.fr-view.fr-strong {
font-weight: 700;
}
a.fr-view.fr-green {
color: green;
}
/**
* Link style.
*/
img.fr-view {
position: relative;
max-width: 100%;
}
img.fr-view.fr-dib {
margin: 5px auto;
display: block;
float: none;
vertical-align: top;
}
img.fr-view.fr-dib.fr-fil {
margin-left: 0;
}
.fr-fir {
margin-right: 0;
}
img.fr-view.fr-dii {
display: inline-block;
float: none;
vertical-align: bottom;
margin-left: 5px;
margin-right: 5px;
max-width: calc(100% - (2 * 5px));
}
img.fr-view.fr-dii.fr-fil {
float: left;
margin: 5px 5px 5px 0;
max-width: calc(100% - 5px);
}
img.fr-view.fr-dii.fr-fir {
float: right;
margin: 5px 0 5px 5px;
max-width: calc(100% - 5px);
}
img.fr-view.fr-rounded {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
img.fr-view.fr-bordered {
border: solid 10px #CCC;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
但现在呢？我应该改变一些东西吗？：/
您是否可以与您的应用程序共享链接或创建一个示例应用程序来重现您遇到的问题？ – pdoherty926