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