Froalaイメージの整列がうまくいきません

私はFroalaを自分のウェブサイトに正常にインストールしましたが、位置付けのイメージは動作していないようです..それらを中央に整列しても常に左に表示されます..Froalaイメージの整列がうまくいきません

ので、テキスト編集モードで、それが正常に動作します。..

しかし、結果を見た後、すべての3 aligmentsは同じように見えます。

画像は、これらのクラスを持っている：私はこれらの行で独自のCSSを作ることによって、この問題を解決する方法を発見し

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)

：（しかし、正直なところ、私は考えて、そこにする必要があります別の方法）..

.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; 
}

誰かが私を助けてくれますか？

EDITは：私のサイトには、次のようになります。

<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; 
}

ここで何ですか？私は何かを変更する必要がありますか：/

出典

2016-09-01 Jacob Grahn

あなたのアプリケーションへのリンクを共有したり、見ている問題を再現するサンプルアプリケーションを作成することは可能でしょうか？ – pdoherty926

私はあなたがバックエンドCMSの内部でFroalaを使用していると推測します。 アプリケーションのスタイルシートと必要な名前空間クラスにFroalaのスタイルシートを含めましたか？

出典

2016-09-01 22:17:41 pdoherty926

自分の投稿を編集しました。あなたが見ているようにFroalaのスタイルシートをすべて含めました：/ –

コードに必要な名前空間クラスが含まれていますか？例えば'img.fr-view.fr-dii'？ [src]（https://github.com/froala/wysiwyg-editor/blob/7975753fd722b2358c6b64e3f25d9e24a13a3891/css/froala_style.css#L264-L272） – pdoherty926

いいえ、私はそれらを見ません。私はすべてのファイル（notepad ++）でそれらを検索しました。そして、これらの不足しているスタイルの正しいCSSコードを投稿することはできますか？私は公式サイトからfroalaをダウンロードしました。このスタイルが欠けている可能性はどうですか？ –

UPDATE 2：解決

問題..私はコンテンツを表示していますDIVにクラス= "FR-ビュー" を書かなければなりませんでした。私はとてもばかげています。ごめんなさい！

出典

2016-09-03 15:57:30

ええ、それは私が意味することです、 "...そして必要な名前空間クラスですか？ – pdoherty926

Froalaイメージの整列がうまくいきません

答えて

関連する問題