html - vertical centering child divs relating parent divs backward compatible with old browser using css -


I have a question ... IE 8 is the basic browser for XP and even the banks and other places Also there are even more options today ... My question is related to css3 which allows to do more sexy coding with small efforts ... there is a useful way to replace css3 transform Could? Probably usable in IE 8+ ... My code only works on modern browsers ... Transformation on IE 8 did not work since Microsoft css3 missing feature ... 

 < Code> & lt; Div class = "main-box" & gt; & Lt; Div class = "headline" style = "width: 60%" & gt; & Lt; Div class = "align-me" & gt; & Lt; Span class = "align-txt" & gt; Example 1 - Line 1 & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "headline" style = "width: 40%" & gt; & Lt; Div class = "align-me" & gt; & Lt; Span class = "align-txt" & gt; Example 2 - Line 1 & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "clustered" & gt; & Lt; / Div & gt; & Lt; Div class = "div-bar" & gt; & Lt; / Div & gt; & Lt; Div class = "headline" style = "width: 60%" & gt; & Lt; Div class = "align-me" & gt; & Lt; Span class = "align-txt" & gt; Example 1 - Line 2 & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "headline" style = "width: 40%" & gt; & Lt; Div class = "align-me" & gt; & Lt; Span class = "align-txt" & gt; Example 2 - Line 2 & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "clustered" & gt; & Lt; / Div & gt; & Lt; / Div & gt;

This is my CSS: 

  .main-box {background: # F5F5F5; Limit: # 6666 FF1 PX solid; Width: 95%; Padding: 0; Margin: 0 auto; Display: Table; }. Main-line {font-family: werdana, Geneva, without-serif; Font-size: 12px; Font style: normal; Line-height: Normal; Font weight: normal; Font-type: normal; Color: # 000080; Padding-top: 5px; Padding-down: 5px; Exhibit: Table-Cell; Minimum height: 40px; Vertical-row: middle; Swim left; } .align-me {display: table-cell; Vertical-row: middle; Swim left; Border: 1px solid red; Minimum height: 40px; } .align-txt {font-family: Verdana, Geneva, without-serif; Font-size: 12px; Font style: normal; Line-height: Normal; Font weight: normal; Font-type: normal; Color: # 000080; Vertical-row: middle; Swim left; Text Align: Justify; }. Main line {status: relative; } .align-me, .align-txt {status: complete; Top: 50%; Left: 50%; Width: 98%; Webkit-Conversion: Translation (-50%, -50%); -MOZ-TRANSFORM: Translation (-50%, -50%); -o-conversion: translation (-50%, -50%); -mms-conversion: translation (-50%, -50%); Conversions: Translation (-50%, -50%); } .align-me .srtgs {margin: 0; } .cleardiv {Clear: Both; } .div-bar {border-top: 1px solid green; }

Here's a demo:

Perhaps other CSS solutions that become iridescent if IE 8 is detected?


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more